[Webmaster] 15 thủ thuật cho Web Developer với Chrome DevTools

Chrome hiện nay là trình duyệt rất phổ biến và hiện diện trong hầu hết trong PC của các tay phát triển web, Chrome được tích hợp công cụ phát triển Web rất mượt và được đánh giá tốt hơn hẳn Firebug trên Firefox. Hầu hết các công cụ tuyệt vời như là Live Edit CSS (thay đổi css và cập nhật trực tiếp preview), Debug Javascript, theo dõi requests lên server,… Trong bài viết này chúng ta sẽ điểm qua 15 thủ thuật tiện ít trên DevTools của Chrome và có thể giúp ích khá nhiều cho các bạn phát triển và Debug (gỡ rối) cho trang web.

1. Mở nhanh một file trên DevTools

open-file

Ngay trên DevTools bạn có thể mở nhanh một file (resource) bằng cách nhấn tổ hợp phím Ctrl + P (với MAC thì tổ hợp phím sẽ là Command + P).

2. Tìm kiếm trong Source Code

2.SearchAll

Như thế nào nếu bạn muốn tìm một chuỗi hay một thành phần nào đó trong source code? Để tìm kiếm trong tất cả các files, bạn có thể sử dụng tổ hợp phím Ctrl + Shift + F (với MAC thì tổ hợp phím sẽ là Cmd + Opt + F). Công cụ search trong DevTools hỗ trợ cả Regular Expressions.

3. Di chuyển đến dòng code chỉ định

3.JumpToLine

Sau khi bạn đang mở một file trong DevTools, bạn có thể di chuyển đến dòng code chỉ định bằng cách sử dụng tổ hợp phím Ctrl + G cho Windows và Linux (với MAC sẽ là Cmd + G) và điền dòng code mà bạn muốn di chuyển tới.

Một trick nhanh để mở một file là Ctrl + O (Cmd + O với MAC).

4. Chọn một đối tượng trong Console

4.

DevTools hỗ trợ một vài chức năng để bạn có thể chọn (Doom) một hay nhiều đối tượng trong console.

  • $() – cách viết ngắn gọn cho document.querySelector() : sẽ trả về phần tử đầu tiên tìm được tương ứng với CSS selector mà bạn chỉ định (CSS Selector: “body” tab, “#body” select một ID element, “.body” select một class selector). Ví dụ $(‘div’) sẽ trả về phần tử đầu tiên DIV trong trang web.
  • $$() – cách viết ngắn gọn của document.querySelectorAll() : sẽ trả về một mảng các phần tử tìm được tương ứng với CSS selector.
  • $0 – $4 : sẽ trả về lịch sử mà bạn đã doom trước đó, ví dụ $0 sẽ trả về kết quả gần nhất, thích hợp để bạn xem lại cách kết quả trước đó, số càng lớn thì kết quả càng cũ.

Để hiểu nhiều hơn về Command line của Chrome bạn có thể tham khảo link Command Line API

5. Sử dụng nhiều Carets và Selections

5.MultipleSelectClick

 

Trong khi bạn đang edit một file bạn có thể sử dụng và sửa đổi nhiều dòng cùng một lúc bằng cách nhấn giữ Ctrl và click nơi thứ hai mà bạn muốn edit, bằng cách này bạn có thể nhập code cùng lúc ở nhiều dòng khác nhau.

6. Preserve Log

6.PreserveLog

Để kiểm tra Perserve Log trong Console Tab, bạn có thể sử dụng DevTools Console hỗ trợ theo dõi Log thay vì phải clear log trong mỗi lần refresh page.

7. Hiển thị Script tốt hơn

7.PrettyPrint

Vào một ngày đẹp trời khi bạn đang debug trang web mà tất cả các script đều được minified (giảm kích thước và khoảng trắng để tiết kiệm dung lượng) thì những thứ bạn nhìn vào chẳng khác gì một đống text mà không được format và bạn không có cách nào để tiếp tục edit.

Nhưng không cần phải quá lo lắng Chrome’s Developer Tools có công cụ Built-In JS Beautifier sẽ hỗ trợ bạn format lại script, đó là Pretty Print Button, nút format này hiển thị ở phía dưới cửa sổ mỗi khi bạn mở Sources Tab.

8. Debug trên thiết bị di động

DevTools hỗ trợ công cụ rất mạnh mẽ cho việc gỡ rối cho các thiết bị di động. Đây là video của Google trình bày khá chi tiết các tính năng hỗ trợ cho các thiết bị di động như thay đổi kích thước màn hình (Screen Resizing), các event như Touch và mô phỏng cả khi thiết bị gặp trường hợp kết nối kém.

9. Giả lập Sensor trên thiết bị di động

9.Sensors

Một chức năng khá tuyệt vời nữa là Device’s Sensors như là Touch, quay và xoay các thiết bị. Với các chức năng này bạn có thể debug các chức năng trên website có hỗ trợ GepGraphic Location để hiển thị đúng hơn trên Map. Bạn có thể truy cập vào chức năng này ngay phía dưới Element Tab -> Sensors.

10. Color Picker

10.ColorPicker

Khi bạn đang chọn một màu sắc bên trong Style Editor, bạn có thể sử dụng tính năng này bằng cách click và chọn màu bất cứ đâu trên trang web và bất cứ màu sắc nào trên trang web.

11. Force Element States

DevTools có tính năng để bạn có thể giả lập sự kiện từ người dùng như hover, click, focus,…

11.SimulateHover

12. Visualize the shadow DOM

12.ShadowDOM

Trình duyệt khởi tạo một số các tính năng cho textboxes, buttons hay các thẻ input. Các tính năng này mặc định sẽ ẩn và người dùng sẽ không thấy được. Tuy nhiên, bạn có thể truy cập vào Settings -> General và di chuyển đến Show user agent shadow DOM, chúng sẽ hiển thị chi tiết hơn để bạn có thể dễ dàng debug.

13. Di chuyển đến kết quả kế tiếp khi search

Nếu bạn nhấn Ctrl + D (Cmd + D trong MAC) khi đang edit file trong cửa sổ Source, kết quả kế tiếp sẽ được chọn để bạn có thể dễ dàng edit.

13.MultiSelect

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

Sử dụng Shift + click trên màu sắc sẽ thay đổi định dạng màu sắc hiện tại giữa rbga, hsl và mã Hex.

14.ColorFormat

15. Chỉnh sửa Local File thông qua Workspace

Workspace là một tính năng mạnh mẽ trong Chrome DevTools, nó có thể trở thành môi trường làm việc như một IDE. Workspace sẽ so sánh files trong Source tab với files trong local drive, với tính năng này bạn có thể chỉnh sửa và lưu lại trực tiếp vào đĩa cứng mà không cần phải copy và paste vào trình soạn thảo khác.

Để cấu hình và sử dụng Workspace, trước tiên bạn di chuyển vào Source Tab và nhấn phải vào bất cứ đâu vào bảng bên trái và chọn Add Folder To Workspace, sao đó kéo và thả thư mục của bạn vào Web Developer Tools. Bây giờ bạn có thể thấy files trong folder có thể chỉnh sửa được.

Bạn có thể xem qua documents của Chrome DevTools Workspace tại link này

 

Comments

comments

No comments yet.

Please Post Your Comments & Reviews

Your email address will not be published. Required fields are marked *