Chrome DevTools là tài sản thiết yếu cho nhà phát triển. Mặc dù các trình duyệt khác cung cấp công cụ khắc phục sự cố khá tiện lợi, Chrome DevTools đáng để bạn chú ý nhờ giao diện đa chức năng và độ phổ biến.
Chrome là trình duyệt phổ biến nhất cho nhà phát triển nhờ bộ công cụ gỡ lỗi (debugging) mạnh mẽ. Dùng Chrome DevTools dễ dàng, nhưng bạn cần hiểu cách nó hoạt động để tận dụng tối đa.
Cách Chrome Developer Tools hoạt động
Chrome DevTools cho phép giải quyết vấn đề trên trang web qua console lỗi (error console) và các công cụ gỡ lỗi, giám sát khác. Dùng DevTools lộ ra lỗ hổng frontend và cho phép giám sát trang web hiển thị như thế nào trên thiết bị di động và máy tính bảng.
Với DevTools, bạn thực hiện chỉnh sửa thời gian thực trên mã trang web, như JavaScript, HTML, CSS, và nhận kết quả tức thì của thay đổi.
Các thay đổi qua DevTools không ảnh hưởng vĩnh viễn đến trang web. Chúng chỉ tạm thời hiển thị kết quả kỳ vọng như thể bạn đã áp dụng vào mã nguồn thực tế. Điều này giúp bạn tìm cách làm trang web tải nhanh hơn và dễ dàng khắc phục lỗi.
Cách truy cập Chrome DevTools
Bạn truy cập Chrome DevTools theo nhiều cách. Để mở công cụ nhà phát triển bằng phím tắt trên Mac OS, nhấn Cmd + Opt + I. Nếu dùng Windows OS, nhấn Ctrl + Shift + I.
Thay vào đó, truy cập Chrome developer tools bằng cách nhấp 3 chấm góc trên phải màn hình. Đi More tools (Công cụ khác), chọn Developer tools (Công cụ nhà phát triển). Tùy chọn khác: chuột phải trang web, chọn Inspect (Kiểm tra).
Dùng Chrome Developer Tools chẩn đoán trang web
Chrome DevTools cung cấp vài cách điều chỉnh và khắc phục sự cố trang web. Hãy xem một số cách DevTools giúp bạn.
Xem trang web hiển thị như thế nào trên điện thoại thông minh
Khi chuyển trình duyệt Chrome sang chế độ nhà phát triển, nó hiển thị phiên bản nửa kích thước trang web. Tuy nhiên, điều này không cho cái nhìn thực tế trên điện thoại hay máy tính bảng.
May mắn thay, ngoài thiết lập kích thước màn hình trang web, Chrome DevTools cho phép chuyển đổi giữa các loại và phiên bản màn hình di động khác nhau.
Để truy cập tùy chọn đó, bật chế độ Inspect (Kiểm tra). Tiếp, nhấp menu thả xuống Responsive góc trên trái DevTools, chọn thiết bị di động ưu tiên. Trang web sau đó render và điều chỉnh vừa kích thước thiết bị bạn chọn.
Truy cập file nguồn của trang web
Bạn truy cập các file cấu thành trang web qua Chrome DevTools. Để truy cập file này, nhấp tùy chọn Sources (Nguồn) ở phần trên menu DevTools. Điều này lộ ra hệ thống file của trang web và cho phép chỉnh sửa.
Bạn cũng tìm kiếm file nguồn, hữu ích khi xử lý trang web có nhiều tài nguyên. Để tìm file nguồn qua DevTools, nhấp tùy chọn Search (Tìm kiếm) ngay trên console.
Tuy nhiên, nếu không tìm thấy tùy chọn Search, giải pháp thay thế tốt hơn là dùng phím tắt. Trên Mac OS, nhấn Cmd + Opt + F tìm file nguồn. Nếu dùng Windows OS, nhấn Ctrl + Shift + F truy cập thanh tìm kiếm file nguồn.
Thực hiện chỉnh sửa trực tiếp trang web
Một trong những mục đích chính dùng DevTools là thực hiện chỉnh sửa giả lập tức thì (fake edit) các phần tử trên trang web. Khi chuyển sang công cụ nhà phát triển, bạn chỉnh sửa nội dung HTML trang web bằng cách nhấp tùy chọn Elements (Phần tử). Sau đó, chuột phải vào bất kỳ điểm nào muốn áp dụng thay đổi trong trình soạn thảo mã, chọn Edit as HTML (Chỉnh sửa như HTML).
Để chỉnh sửa thuộc tính CSS không phải inline, chọn Sources. Tiếp, chọn file CSS muốn chỉnh. Đặt con trỏ vào dòng mã chọn trong console để thực hiện chỉnh sửa trực tiếp. Làm này cho phản hồi tức thì về bất kỳ thay đổi kiểu dáng nào bạn áp dụng cho trang web.
Lưu ý: khi bạn chỉnh sửa trang qua DevTools, tải lại trang trên trình duyệt sẽ khôi phục dạng gốc, và chỉnh sửa chỉ hiển thị cho bạn. Chỉnh sửa qua DevTools không ảnh hưởng đến việc chạy mượt hay sử dụng trang web cho người dùng khác.
Gỡ lỗi mã JavaScript với DevTools Console
Một trong những cách tốt nhất gỡ lỗi JavaScript là dùng công cụ nhà phát triển Chrome. Nó báo cáo trực tiếp script không hợp lệ cũng như vị trí chính xác của lỗi (bug).
Thói quen tốt là luôn giữ DevTools mở khi thiết kế trang web với JavaScript. Ví dụ, chạy lệnh console.log() của JavaScript trên một tập hợp chỉ thị hiển thị kết quả log đó trong DevTools console nếu chương trình chạy thành công.
Mặc định, console báo cáo bất kỳ vấn đề JavaScript nào trên trang web. Bạn tìm console ở phần dưới DevTools hoặc truy cập bằng cách nhấp tùy chọn Console đầu cửa sổ Chrome DevTools.
Giám sát tài nguyên tải từ cơ sở dữ liệu
Ngoài gỡ lỗi JavaScript, console cũng cho chi tiết tài nguyên không tải đúng từ cơ sở dữ liệu trang web.
Mặc dù không phải cách tốt nhất gỡ lỗi backend, nó vẫn cho biết tài nguyên nào trả về lỗi 404 sau truy vấn cơ sở dữ liệu những phần tử đó.
Đổi hướng Chrome Developer Tools
Để đổi vị trí Chrome developer tools, nhấp 3 chấm menu trong DevTools (không phải menu chính trình duyệt). Sau đó chọn vị trí ưu thích từ tùy chọn Dock side (Bên neo).
Cài đặt tiện ích mở rộng Chrome DevTools
Bạn cũng cài đặt tiện ích mở rộng dành cho ngôn ngữ hoặc framework cụ thể làm việc với Chrome DevTools. Cài các tiện ích này giúp gỡ lỗi trang web hiệu quả hơn.
Bạn truy cập danh sách tiện ích mở rộng có sẵn cho Chrome DevTools trong thư viện Chrome's Featured DevTools Extensions.
Kiểm tra vấn đề bảo mật trên trang web
Chrome DevTools cho phép đánh giá mức độ an toàn trang web, dựa trên tham số như tính sẵn có chứng chỉ bảo mật web, mức độ an toàn kết nối, trong số khác. Để kiểm tra an toàn trang web, nhấp tùy chọn Security (Bảo mật) đầu DevTools.
Tab Security cho tổng quan chi tiết bảo mật trang web và báo bất kỳ mối đe dọa tiềm ẩn nào.
Kiểm toán (Audit) trang web
Chrome DevTools có tính năng kiểm tra hiệu suất tổng thể trang web dựa trên tham số cụ thể.
Để truy cập tính năng, chọn tùy chọn Lighthouse đầu cửa sổ DevTools. Tiếp, chọn tham số muốn kiểm tra, tích Mobile hoặc Desktop xem trang web hoạt động như thế nào trên các nền tảng khác nhau.
Sau đó, nhấp Generate report (Tạo báo cáo) chạy phân tích trang web dựa trên tham số bạn chọn trước.
Bạn cũng đánh giá hiệu suất chạy (run-time) hoặc tải (loading performance) bằng cách nhấp tùy chọn Performance (Hiệu suất). Để chạy kiểm tra, nhấp biểu tượng bên cạnh Click the record button (Nhấp nút ghi) thực hiện phân tích run-time. Thay vào đó, nhấp nút tải lại (reload) dưới nó đánh giá hiệu suất tải. Nhấp Stop (Dừng) để dừng bộ phân tích và hiển thị kết quả.
Tận dụng Chrome DevTools
Tùy theo nhu cầu, Chrome DevTools cho phép bạn làm nhiều hơn chỉ gỡ lỗi trang web đơn giản. May mắn, DevTools dễ dùng cho lập trình viên mọi trình độ. Bạn thậm chí có thể học cơ bản phát triển frontend trang web bằng cách xem mã nguồn trang web bạn truy cập.
Bạn cũng có thể khám phá thêm tùy chọn chúng tôi không bàn trong bài này. Vì vậy, hãy tự do thử nghiệm các tính năng có sẵn. Bên cạnh đó, điều chỉnh các tính năng này không gây hại cho trang web chút nào.