Chrome DevTools là một tài sản cần thiết cho các nhà phát triển. Trong khi các trình duyệt khác cung cấp các công cụ khắc phục sự cố khá tiện dụng, Chrome DevTools đáng để bạn quan tâm vì giao diện đa chức năng và tính phổ biến của nó.
Chrome là trình duyệt phổ biến nhất dành cho các nhà phát triển do có bộ công cụ gỡ lỗi mạnh mẽ. Sử dụng Chrome DevTools thật dễ dàng nhưng bạn cần hiểu cách hoạt động của nó để tận dụng tối đa.
Cách hoạt động của Công cụ dành cho nhà phát triển Chrome
Chrome DevTools cho phép bạn giải quyết các sự cố trên một trang web thông qua bảng điều khiển lỗi cũng như các công cụ giám sát và gỡ lỗi khác. Việc sử dụng DevTools cho thấy lỗ hổng giao diện người dùng và cho phép bạn theo dõi cách trang web của mình xuất hiện trên thiết bị di động và máy tính bảng.
Với DevTools, bạn có thể thực hiện các chỉnh sửa trong thời gian thực trên mã của trang web, như JavaScript, HTML và CSS, đồng thời nhận được kết quả tức thì về các thay đổi của bạn.
Những thay đổi bạn thực hiện qua DevTools không ảnh hưởng vĩnh viễn đến trang web. Chúng chỉ hiển thị tạm thời kết quả mong đợi như thể bạn đã áp dụng chúng vào mã nguồn thực tế. Điều này cho phép bạn tìm ra các cách để trang web của bạn tải nhanh hơn nhiều và giúp bạn khắc phục lỗi dễ dàng hơn.
Cách truy cập Công cụ dành cho nhà phát triển của Chrome
Bạn có thể truy cập Công cụ dành cho nhà phát triển của Chrome theo một số cách. Để mở công cụ dành cho nhà phát triển bằng phương pháp phím tắt trên Mac OS, nhấn Cmd + Opt + I . Nếu bạn đang sử dụng Hệ điều hành Windows, hãy nhấn Ctrl + Shift + I các phím trên bàn phím của bạn.
Ngoài ra, bạn có thể truy cập các công cụ dành cho nhà phát triển Chrome bằng cách nhấp vào ba dấu chấm ở góc trên bên phải của màn hình. Đi tới Các công cụ khác và chọn Công cụ dành cho nhà phát triển . Một tùy chọn khác là nhấp chuột phải vào trang web và nhấp vào nút Kiểm tra tùy chọn.
Sử dụng Công cụ dành cho nhà phát triển Chrome để chẩn đoán trang web
Công cụ dành cho nhà phát triển của Chrome cung cấp một số cách để tinh chỉnh và khắc phục sự cố trang web. Hãy xem một số cách DevTools có thể giúp bạn.
Xem trang web của bạn trông như thế nào trên điện thoại thông minh
Sau khi bạn chuyển trình duyệt Chrome của mình sang chế độ nhà phát triển, nó sẽ hiển thị một phiên bản có kích thước bằng một nửa trang web của bạn. Tuy nhiên, điều này sẽ không cung cấp cho bạn cái nhìn thực tế về những gì nó sẽ trông như thế nào trên điện thoại thông minh hoặc máy tính bảng.
Rất may, ngoài việc đặt kích thước màn hình của trang web, Công cụ dành cho nhà phát triển của Chrome cũng cho phép bạn 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 đó, hãy bật nút Kiểm tra cách thức. Tiếp theo, nhấp vào nút Đáp ứng ở góc trên bên trái của DevTools và chọn thiết bị di động ưa thích của bạn. Sau đó, trang web sẽ hiển thị và điều chỉnh để vừa với kích thước của thiết bị di động bạn đã chọn.
Truy cập Tệp Nguồn của Trang web
Bạn có thể truy cập các tệp tạo nên trang web thông qua Công cụ dành cho nhà phát triển của Chrome. Để truy cập các tệp này, hãy nhấp vào Nguồn ở phần trên của menu DevTools. Điều này cho thấy hệ thống tệp của trang web và cũng cho phép bạn chỉnh sửa.
Bạn cũng có thể tìm kiếm các tệp nguồn, điều này có thể hữu ích khi bạn đang xử lý một trang web có nhiều tài nguyên. Để tìm kiếm tệp nguồn qua DevTools, hãy nhấp vào nút Tìm kiếm ngay phía trên bảng điều khiển.
Tuy nhiên, nếu bạn không thể tìm thấy Tìm kiếm tùy chọn, một giải pháp thay thế tốt hơn là sử dụng phím tắt. Trên Mac OS, nhấn Cmd + Opt + F các phím để tìm kiếm tệp nguồn. Nếu bạn đang sử dụng hệ điều hành Windows, nhấn Ctrl + Shift + F để truy cập vào thanh tìm kiếm tệp nguồn.
Thực hiện các chỉnh sửa trực tiếp cho một trang web
Một trong những mục đích chính của việc sử dụng DevTools là thực hiện chỉnh sửa giả mạo ngay lập tức các phần tử trên trang web. Sau khi chuyển sang công cụ dành cho nhà phát triển, bạn có thể chỉnh sửa nội dung HTML của trang web bằng cách nhấp vào Phần tử lựa chọn. Sau đó, nhấp chuột phải vào bất kỳ điểm nào bạn muốn áp dụng các thay đổi trong trình chỉnh sửa mã và chọn Chỉnh sửa dưới dạng HTML .
Để chỉnh sửa các thuộc tính CSS không nội dòng, hãy chọn Nguồn . Tiếp theo, chọn tệp CSS mà bạn muốn chỉnh sửa. Đặt con trỏ vào dòng bạn chọn trong bảng điều khiển mã để thực hiện chỉnh sửa trực tiếp. Làm điều này cung cấp cho bạn phản hồi tức thì về bất kỳ thay đổi kiểu nào bạn áp dụng cho trang web.
Lưu ý rằng khi bạn chỉnh sửa một trang qua DevTools, việc tải lại trang trên trình duyệt của bạn sẽ hoàn nguyên trang đó về dạng ban đầu và bản chỉnh sửa chỉ hiển thị với bạn. Việc chỉnh sửa qua DevTools không ảnh hưởng đến hoạt động trơn tru cũng như việc sử dụng trang web đó cho những người dùng khác.
Gỡ lỗi JavaScript Code bằng DevTools Console
Một trong những cách tốt nhất để gỡ lỗi JavaScript là sử dụng các công cụ dành cho nhà phát triển của Chrome. Nó cung cấp cho bạn một báo cáo trực tiếp về các tập lệnh không hợp lệ cũng như vị trí chính xác của lỗi.
Thực hành tốt là luôn mở DevTools trong khi thiết kế trang web bằng JavaScript. Ví dụ:chạy console.log () lệnh của JavaScript trên một tập hợp các hướng dẫn hiển thị kết quả của lần đăng nhập đó trong bảng điều khiển DevTools nếu chương trình chạy thành công.
Theo mặc định, bảng điều khiển báo cáo bất kỳ sự cố JavaScript nào trên trang web của bạn. Bạn có thể tìm thấy bảng điều khiển ở phần dưới của DevTools hoặc truy cập nó bằng cách nhấp vào Bảng điều khiển ở đầu cửa sổ Chrome DevTools.
Giám sát Tải tài nguyên từ Cơ sở dữ liệu
Ngoài việc gỡ lỗi JavaScript, bảng điều khiển cũng có thể cung cấp cho bạn thông tin chi tiết về các tài nguyên đang tải không chính xác từ cơ sở dữ liệu của trang web.
Mặc dù đây không phải lúc nào cũng là cách tốt nhất để gỡ lỗi các vấn đề về chương trình phụ trợ, nhưng nó vẫn cho bạn biết tài nguyên nào đang trả về 404 lỗi sau khi chạy truy vấn cơ sở dữ liệu của các phần tử đó.
Chuyển hướng của Công cụ dành cho nhà phát triển Chrome
Để thay đổi vị trí của các công cụ dành cho nhà phát triển Chrome, hãy nhấp vào ba chấm menu trong DevTools (không phải là chính trên trình duyệt). Sau đó, chọn vị trí ưa thích của bạn từ phía Dock tùy chọn.
Cài đặt Tiện ích mở rộng Chrome DevTools
Bạn cũng có thể cài đặt các tiện ích mở rộng dành riêng cho ngôn ngữ hoặc khuôn khổ hoạt động với Công cụ dành cho nhà phát triển của Chrome. Việc cài đặt các tiện ích mở rộng này cho phép bạn gỡ lỗi trang web của mình hiệu quả hơn.
Bạn có thể truy cập danh sách các tiện ích mở rộng có sẵn cho Công cụ dành cho nhà phát triển của Chrome trong thư viện Tiện ích mở rộng dành cho nhà phát triển nổi bật của Chrome.
Kiểm tra Vấn đề Bảo mật trên Trang web
Chrome DevTools cho phép bạn đánh giá mức độ an toàn của trang web dựa trên các thông số như tính khả dụng của chứng chỉ bảo mật web và mức độ an toàn của kết nối, trong số những thông số khác. Để kiểm tra xem trang web của bạn có an toàn không, hãy nhấp vào nút Bảo mật ở đầu DevTools.
Bảo mật tab này cung cấp cho bạn cái nhìn tổng quan về các chi tiết bảo mật của trang web và cho bạn biết bất kỳ mối đe dọa tiềm ẩn nào.
Kiểm tra trang web của bạn
Chrome DevTools có một tính năng cho phép bạn kiểm tra hiệu suất tổng thể của trang web dựa trên các thông số cụ thể.
Để truy cập tính năng đó, hãy chọn Ngọn hải đăng ở đầu cửa sổ DevTools. Tiếp theo, chọn các thông số bạn muốn kiểm tra, sau đó đánh dấu vào mục Di động hoặc Máy tính để bàn các tùy chọn để xem trang web của bạn hoạt động như thế nào trên các nền tảng khác nhau.
Tiếp theo, nhấp vào Tạo báo cáo để chạy phân tích trang web của bạn dựa trên các thông số bạn đã chọn trước đó.
Bạn cũng có thể đánh giá thời gian chạy hoặc hiệu suất tải của trang web bằng cách nhấp vào Hiệu suất lựa chọn. Để chạy kiểm tra, hãy nhấp vào biểu tượng bên cạnh Nhấp vào nút ghi tùy chọn để thực hiện phân tích thời gian chạy. Ngoài ra, hãy nhấp vào nút tải lại bên dưới để đánh giá hiệu suất thời gian tải. Nhấp vào Dừng để dừng máy phân tích và hiển thị kết quả.
Tận dụng lợi thế của Chrome DevTools
Tùy thuộc vào những gì bạn cần, Chrome DevTools cho phép bạn làm được nhiều việc hơn là chỉ gỡ lỗi trang web đơn giản. Rất may, DevTools rất dễ sử dụng cho các lập trình viên ở mọi cấp độ kỹ năng. Bạn thậm chí có thể tìm hiểu một số kiến thức cơ bản về phát triển giao diện người dùng của trang web bằng cách tra cứu mã nguồn của các trang web bạn truy cập.
Bạn cũng có thể khám phá một số tùy chọn khác mà chúng tôi không thảo luận trong bài viết này. Vì vậy, hãy thoải mái sử dụng các tính năng có sẵn. Ngoài ra, việc điều chỉnh các tính năng này không gây hại cho trang web một chút nào.