Với các bạn web developer, trình duyệt web là thứ chúng ta tiếp xúc nhiều nhất chỉ sau IDE. Chrome là một trình duyệt web được giới lập trình viên ưa chuộng vì nhanh, tiện lợi, và có bộ Developer Tools vô cùng mạnh mẽ. Bài viết này sẽ giới thiệu một số tính năng của bộ Developer Tools này.
Các bạn nào muốn theo nghiệp web developer nên đọc kĩ bài này nhé, vì bạn sẽ áp dụng những kiến thức này trong suốt quá trình làm việc đấy (Dù bạn có làm C#, Java, PHP, hễ có đụng tới front-end thì đều phải dùng Chrome Developer Tools cả).
Để mở cửa số Developer Tools, ta ấn rổ hợp phím Ctrl + Shift + J. Nhiều bạn quen sử dụng Developer Tools để debug CSS, có thể nhấp chuột phải vài một element, chọn Inspect Element.
Giao diện có thể hơi khác qua các phiên bản Chrome, nhưng số lượng và chức năng của các Tab vẫn tương tự nhau.
1. Elements
Tab này hiển thị HTML của các element trong trang web. Trước khi có Developer Tools, ta phải sửa CSS, save lại rồi refresh lại page. Ngày nay, ta có thể sửa trực tiếp CSS của 1 element vào khung phía bên phải, xem kết quả ngay lập tức. (Đây là một chức năng khá hay có từ add-on Firebug của Firefox, được các web developer/web designer dành tặng vô số lời khen).
Ngoài ra, nếu phải thiết kế web responsive, ta cũng có thể click vào icon mobile để test trang web trên màn hình các device với độ phân giải khác nhau.
2. Networks
Ở tab này, ta có thể xem toàn bộ những thứ được trình duyệt tải về từ server: HTML, CSS, JS, hình ảnh, … Mình thường dùng tab này để xem thời gian tải trang, nhằm optimize và tăng tốc độ.
Các AJAX request cũng hiện trong Tabs này. Bạn có thể bấm vào từng request riêng lẻ để xem thời gian request chạy, request đã gửi gì lên server, kết quả trả về từ server. Đôi khi sử dụng AJAX nhưng code không chạy, mình phải sử dụng tab này để xem lỗi là gì, xảy ra ở client hay server.
3. Sources
Tab này hiển thị những file javascript được trình duyệt load.
Ở tab này, ta có thể debug xem javascript chạy như thế nào. Với các ứng dụng sử dụng nhiều javascript hoặc dùng các library/framework như jQuery, AngularJS, ta có thể vào tab này, đặt breakpoint và debug như các IDE thông thường.
Có một mẹo nhỏ khi debug: Nếu các bạn code trong các trang fiddle, hoặc làm việc với quá nhiều file, thư viện vài ngàn dòng, không thể đặt breakpoint bằng tay… hãy thêm dòng lệnh “debugger” vào sau dòng code cần debug. Bộ Debugger của Developer Tools sẽ tự xem dòng lệnh này là breakpoint, dừng ở câu “debugger” cho bạn debug
4. Timeline & Profile
Hai tab này mình ít khi dùng. Khi javascript chạy quá chậm, developer sẽ sử dụng 2 tabs này để tìm hiểu function nào chạy chậm, nhằm optimize lại code và tăng tốc cho trang.
5. Resources
Tab này hiển thị những thông tin được lưu trữ trong WebSQL, LocalStorage, SessionStorage, Cookies. Khi sử dụng những cơ chế trên để lưu dữ liệu người dùng, ta có thể vào tab này để kiểm tra
6. Audits
Tab này có chức năng kiểm duyệt tốc độ của website, đưa ra những lời khuyên để tăng tốc. Vào Tab này và bấm Run, Developer Tool sẽ tiến hành đo đạc, so sánh tốc độ load của Web Site, kiểm tra xem Website đã được tối ưu hay chưa, sau đó đưa ra những cách tăng tốc. Một chức năng khá hay và thú vị.
7. Console
Những lỗi liên quan tới javascript (không load được, thiếu mở đóng ngoặc, chấm phẩy, …) sẽ hiển trị trong tab này. Ta có thể nhập trực tiếp javascript vào tab này để chạy.
1. Mở nhanh file javascript
Với những dự án lớn, có hơn chục file css, js,… việc tìm mở file sẽ rất khó khăn. Chỉ cần mở Developer Tools, bấm tổ hợp Ctrl + P, những file cần tìm sẽ hiện ra đầy đủ, bạn chỉ việc chọn và ấn Enter.
2. Tìm kiếm trong source code
Thông thường, để tìm kiếm trong file html, css, js, ta thường dùng chức năng Search trong IDE. Developer Tool cũng có chức năng tương tự, kích hoạt bằng cách ấn Ctrl + Shift + F.
3. Select các element trong HTML
Để chọn 1 element trong HTML, ta thường hay sử dụng jQuery. Cửa sổ Console của Developer Tool cũng có 1 bộ api để ta select các element.
- $(): Viết tắt cho document.querySelector(). bạn có thể dùng cú pháp css để select element tương tự jquery. Kết quả trả về là element đầu tiên tìm được.
- $$(): Viết tắt cho document.querySelectorAll(). Tương tự như $(), nhưng trả về toàn bộ các element.
- $0-$4: Các element đã được select gần đây nhất. $0 là element cuối cùng được select.
4. Chuyển code xấu thành code đẹp
Nhiều khi chúng ta viết code ẩu, tất cả để chung một dòng, rất khó đọc. Hoặc ta sử dụng thư viện với code đã minify, rất khó đọc hay debug. Rất đơn giản, chỉ cần nhấp vào icon {} để “tút lại nhan sắc” cho code.
5. Chuyển đổi trạng thái của các element (hover, active)
Khi dùng Developer Tools kiểm tra css của các element, ta phải rê chuột lên element, hoặc click vào element đó, đôi khi khá rắc rối. Tab Element có một khung cho phép chúng ta set trạng thái của các element này luôn.
6. Chỉnh sửa nhanh nội dung các element
Khi muốn chỉnh sửa nội dung (text) của các đoạn văn, các đề mục trong trang web, ta phải bật Developer Tool lên, chọn element cần chỉnh sửa, sau đó sửa HTML. Chỉ cần vào cửa sổ console, đánh dòng lệnh document.body.contentEditable=true, bạn có thể thoải mái sửa text của trang web một cách dễ dàng.
7. Tìm những event được bind vào một element
Khi debug, mình luôn đau đầu vì không biết những hàm nào sẽ được gọi khi click vào một button, hover qua một div. Với Developer Tool, ta có thể gõ hàm getEventListeners(element) vào cửa sổ console, hoặc tìm những event được bind vào element đó trong tab Elements.
8. In object ra console nhờ log và table
Chắc 90% các bạn web developer đều biết dùng console.log() để in ra một object trong cửa sổ console, giúp việc debug được dễ dàng. Chrome Developer Tool còn có một hàm rất thú vị nhưng ít người biết, đó là hàm console.table(). Hàm này có thể in 1 mảng các object ra dưới dạng 1 bảng, rất trực quan và dễ nhìn.
9. Lưu trữ console log, không mất log khi refresh lại trang
Một khi refresh lại trang web, cửa số Console sẽ bị xóa trắng trơn. Để nội dung cửa sổ Console vẫn giữ nguyên khi refresh lại trang, ta chỉ cần tick vào ô “Preserve Log”.
10. Lấy màu của các element khác trên trang web
Tab Element của Developer Tool có một công cụ để lấy màu vô cùng tiện lợi. Hãy click vào css nào liên quan tới màu sắc (color, background-color), một bảng màu sẽ hiện ra, cùng với một cây bút lấy màu cho phép bạn “chôm” màu từ element khác.
Nguồn tham khảo:
- http://www.codeproject.com/Tips/1023947/The-Awesomeness-of-Chromes-Developer-Console
- https://developer.chrome.com/devtools/docs/console
- https://developer.chrome.com/devtools/docs/tips-and-tricks
- http://tutorialzine.com/2015/03/15-must-know-chrome-devtools-tips-tricks/
- http://elijahmanor.com/7-chrome-tips-developers-designers-may-not-know/
