Google Chrome là trình duyệt web phổ biến thường được nhiều lập trình viên sử dụng. Trong đó có nhiều tính năng hỗ trợ nổi bật như trực t...
Google Chrome là trình duyệt web phổ biến thường được nhiều lập trình viên sử dụng. Trong đó có nhiều tính năng hỗ trợ nổi bật như trực tiếp chỉnh sửa CSS (live-editing CSS), sử dụng console và debugger. Trong bài viết này, xin giới thiệu đến bạn một số cách giúp sử dụng Chrome DevTools hiệu quả và cải thiện quy trình làm việc tốt hơn.
1. Nhanh chóng chuyển đổi file
Nếu sử dụng Sublime Text, chắc hẳn bạn đã quá quen thuộc với overlay “Go to anything”. Tin vui là Chrome DevTools cũng có tính năng này. Bạn chỉ cần nhấn tổ hợp phím Ctrl+P (hoặc Cmd+P với máy Mac) để nhanh chóng tìm kiếm và mở bất kì file nào trong project của mình.
2. Tìm kiếm trong source code
Nếu bạn muốn tìm kiếm trong source code thì phải làm sao? Để tìm kiếm một chuỗi cụ thể trong tất cả các files được tải trên page, hãy nhấn Ctrl+Shift+F (hoặc Cmd+Opt+F). Phương thức tìm kiếm này cũng hỗ trợ cả trên Regular expression (Biểu thức chính quy).
Sau khi mở một file trong tab Sources, DevTools cho phép bạn dễ dàng đi tới bất kì dòng lệnh nào bằng cách nhấn Ctrl+G (hoặc Cmd+L) và gõ số thự tự dòng bạn muốn đến.
Hoặc theo cách khác, bạn có thể nhấn Ctrl+O (Cmd+O) rồi nhập :số thứ tự dòng cần đến.
4. Chọn các elements trong console
DevTools console cũng hỗ trợ 1 vài hàm và biến giúp chọn nhanh các DOM element: (The DevTools console supports some handy magic variables and functions selecting DOM elements:)
$() – viết tắt của document.querySelector(). Trả về element đầu tiên hợp với CSS selector trong ngoặc (Ví dụ: Nếu bạn gõ $(‘div’) thì sẽ trỏ về element div đầu tiên của page).
$$() – viết tắt của document.querySelectorAll(). Trả về 1 chuỗi các element hợp với CSS selector trong ngoặc.
$0 – $4 – Khi gõ $0 sẽ hiển thị DOM element mới nhất được chọn trong bảng điều khiển element. $1 – $4 sẽ lần lượt hiển thị DOM element thứ hai đến thứ 5.
5. Sử dụng đa dạng carets & selections
Đây là 1 tính năng tương tự Sublime Text khác. Trong khi chỉnh sửa file, bạn có thể thiết lập đa dạng carets bằng cách giữ phím Ctrl (Cmd với Mac) và click vào bất kì chỗ nào bạn muốn, vì vậy cho phép bạn cùng lúc viết code ở nhiều dòng khác nhau.
6. Pretty Print {}
Chrome DevTools cung cấp sẵn công cụ “làm đẹp” code giúp bạn định dạng những đoạn code rút gọn thành những đoạn code dễ đọc hiểu. Để làm được điều này, trong tab Sources, bạn nhấp chọn ký hiệu {} ở góc trái bên dưới file đang mở.
7. Visualize the shadow DOM
Các textbox, button hoặc input ngoài các element cơ bản thường bị ẩn đi. Tuy nhiên, bạn có thể vào Settings -> General và chọn Show user agent shadow DOM để giúp chúng hiển thị cụ thể. Thậm chí bạn có thể tạo kiểu (style) riêng cho các textbox, button hoặc input này, giúp dễ dàng tùy chỉnh theo ý muốn.
Ví dụ: Thông thường, bạn chỉ nhìn thấy <input type=”range”>. Nhờ tính năng này, bạn có thể thấy được chuỗi code tạo nên input đó.
8. Chỉnh sửa các tập tin local nhờ Workspaces
Workspaces là một tính năng hữu ích của Chrome DevTools, giúp công cụ này trở thành một IDE (Integrated Development Environment – Môi trường phát triển tích hợp) thực thụ. Workspaces kết nối các tập tin trong tab Sources với các tập tin trong local project, vì vậy bạn có thể chỉnh sửa và lưu trực tiếp mà không cần copy/paste (sao chép/dán) những thay đổi của mình vào text editor bên ngoài.
Để thiết lập cấu hình Workspaces, bạn vào tab Sources và nhấp chuột phải vào bất kì đâu trên panel bên trái và chọn Add Folder To Worskpace, hoặc chỉ cần kéo và thả toàn bộ project folder vào Developer Tools. Giờ thì các sub directories và tất cả files của folder được chọn đã sẵn sàng để chỉnh sửa bất kể bạn đang ở trên page nào. Thậm chí, bạn có thể liên kê các file trong folder của mình với các file của page để chỉnh sửa trực tiếp và lưu trữ dễ dàng hơn.
COMMENTS