15 mẹo giúp sử dụng Chrome DevTools hiệu quả

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, SSS sẽ giới thiệu đến bạn 15 mẹo 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).

3. Di chuyển tới dòng lệnh

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.

Nếu muốn tìm hiểu nhiều hơn về Console commands, bạn có thể đọc thêm Command Line API.

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. Preserve Log

Bạn có thể giữ lại log trong DevTools Console thay vì xóa chúng mỗi lần load page bằng cách check vào tùy chọn ☑Preserve Log trong Tab Console. Tính năng này khá tiện dụng khi bạn muốn kiểm tra những bugs xuất hiện ngay trước khi page unload.

7. 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ở.

8. Device mode

DevTools cũng cung cấp trang lập trình thân thiện với điện thoại di động. Clip từ Google dưới đây sẽ giới thiệu 1 vài tính năng chính của Device mode như điều chỉnh màn hình, mô phỏng chạm cảm ứng và mô phỏng trạng thái kết nối network trục trặc (bad network connections simulator).

9. Thiết bị mô phỏng cảm biến Device emulation sensors

Một tính năng khá “cool” khác của Device Mode là cho phép lựa chọn mô phỏng cảm biến của các thiết bị di động như chạm cảm ứng màn hình hay accelerometers (gia tốc kế). Thậm chí bạn có thể giả lập vị trí địa lý của mình. Để làm được điều này, bên dưới tab Elements, bạn chọn tab Emulation -> Sensors.

10. Color Picker

Khi chọn 1 màu trong Style editor, bạn có thể nhấp chuột vào color preview và pop-up picker sẽ hiện ra. Trong khi color picker đang chạy, nếu bạn rê chuột trên page, trỏ chuột của bạn sẽ trở thành một kính lúp để chọn màu chuẩn xác đến từng pixel.

11. Force element state

DevTools cung cấp 1 tính năng giúp giả lập trạng thái CSS trên các elements như :hovervà :focus, giúp dễ dàng tạo kiểu cho các element này.

12. 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 . Nhờ tính năng này, bạn có thể thấy được chuỗi code tạo nên input đó.

13. Chọn các occurrence tiếp theo Select next occurrence

Nếu bạn chọn 1 từ gốc bất kì, sau đó giữ Ctrl+D (Cmd+D) trong khi chỉnh sửa các tập tin trong Tab Sources, thì những từ (giống từ gốc) còn lại sẽ được chọn, giúp bạn chỉnh sửa tất cả cùng lúc.

If you press Ctrl + D (Cmd + D) while editing files in the Sources Tab, the next occurrence of the current word will be selected as well, helping you edit them simultaneously.

14. Thay đổi định dạng màu sắc

Giữ Shift và nhấp chọn vào ô hiển thị màu mẫu để thay đổi định dạng giữa các bảng mã rgba, hsl và hexadecimal.

15. 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êys 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. To make it even more useful, you can then map files in your folder to those used by the page, allowing for live editing and easy saving.

Bạn có thể tìm hiểu thêm về Workspaces tại đây.

Dịch từ tutorialzine.com.