Tổng quan về Công cụ phát triển trình duyệt

Công cụ phát triển trình duyệt là một yếu tố cơ bản trong hộp công cụ dành cho nhà phát triển giao diện người dùng và chúng có sẵn trong tất cả các trình duyệt hiện đại. Khám phá những điều cơ bản về những gì họ có thể làm cho bạn

Công cụ phát triển trình duyệt

Tôi không nghĩ rằng đã có lúc các trang web và ứng dụng web dễ xây dựng, như đối với các công nghệ phụ trợ, nhưng nói chung, phát triển phía máy khách chắc chắn dễ dàng hơn bây giờ.

Khi bạn đã tìm ra sự khác biệt giữa Internet Explored và Netscape Navigator, đồng thời tránh các thẻ và công nghệ độc quyền, tất cả những gì bạn phải sử dụng là HTML và CSS sau này.

JavaScriptlà một công nghệ để tạo hộp thoại và hơn thế nữa, nhưng chắc chắn không phổ biến như ngày nay.

Mặc dù rất nhiều trang web vẫn là HTML + CSS thuần túy, giống như trang này, nhiều trang web khác là các ứng dụng thực sự chạy trong trình duyệt.

Chỉ cung cấp nguồn của trang, giống như trình duyệt đã làm ngày xưa, là không đủ.

Trình duyệt phải cung cấp nhiều thông tin hơn về cách họ hiển thị trang và trang hiện đang làm gì, do đó họ giới thiệutính năng dành cho nhà phát triển: của chúngNhững công cụ phát triển.

Mỗi trình duyệt đều khác nhau và do đó các công cụ dành cho nhà phát triển của họ cũng hơi khác nhau. Tại thời điểm viết bài, các công cụ dành cho nhà phát triển yêu thích của tôi được cung cấp bởi Chrome và đây là trình duyệt mà chúng ta sẽ nói ở đây, mặc dù Firefox và Edge cũng có những công cụ tuyệt vời.


Cấu trúc HTML và CSS

Hình thức sử dụng cơ bản nhất và rất phổ biến là kiểm tra nội dung của một trang web. Khi bạn mở DevTools, đó là bảng điều khiển, bảng điều khiển Elements là những gì bạn thấy:

Elements panel of the Browser Dev Tools

Bảng điều khiển HTML

Ở bên trái, HTML tạo trang.

Di chuột vào các phần tử trong bảng HTML đánh dấu phần tử trong trang và nhấp vào biểu tượng đầu tiên trong thanh công cụ cho phép bạn nhấp vào một phần tử trong trang và phân tích phần tử đó trong trình kiểm tra.

Bạn có thể kéo và thả các phần tử trong trình kiểm tra để thay đổi trực tiếp vị trí của chúng trong trang.

Bảng điều khiển kiểu CSS

Ở bên phải, các kiểu CSS được áp dụng cho phần tử hiện được chọn.

Ngoài việc chỉnh sửa và tắt các thuộc tính, bạn có thể thêm một thuộc tính CSS mới, với bất kỳ mục tiêu nào bạn muốn, bằng cách nhấp vào+biểu tượng.

Ngoài ra, bạn có thể kích hoạt trạng thái cho phần tử đã chọn, vì vậy bạn có thể thấy các kiểu được áp dụng khi nó hoạt động, di chuột, trên tiêu điểm.

Ở dưới cùng,mô hình hộpcủa phần tử đã chọn giúp bạn nhanh chóng tìm ra lề, khoảng đệm, đường viền và kích thước:

Box model in the CSS styles panel


Bàn điều khiển

Yếu tố quan trọng thứ hai của DevTools là Bảng điều khiển.

Bảng điều khiển có thể được nhìn thấy trên bảng điều khiển của chính nó hoặc bằng cách nhấnEsctrong bảng Elements, nó sẽ hiển thị ở dưới cùng.

Bảng điều khiển chủ yếu phục vụ hai mục đích:thực thi JavaScript tùy chỉnhbáo cáo lỗi.

Thực thi JavaScript tùy chỉnh

Ở dưới cùng của Bảng điều khiển có một con trỏ nhấp nháy. Bạn có thể nhập bất kỳ JavaScript nào ở đó và nó sẽ được thực thi ngay lập tức. Ví dụ, hãy thử chạy:

alert('test')

Số nhận dạng đặc biệt$0cho phép bạn tham chiếu phần tử hiện được chọn trong trình kiểm tra phần tử. Nếu bạn muốn tham chiếu nó như một bộ chọn jQuery, hãy sử dụng$($0).

Bạn có thể viết nhiều hơn một dòng vớishift-enter. Nhấn enter ở cuối tập lệnh sẽ chạy nó.

Báo cáo lỗi

Mọi lỗi, cảnh báo hoặc thông tin xảy ra trong khi hiển thị trang và sau đó thực thi JavaScript, đều được liệt kê ở đây.

Ví dụ: không thể tải tài nguyên từ mạng, với thông tin trêntại sao, được báo cáo trong bảng điều khiển.

Console Error Reporting

Trong trường hợp này, việc nhấp vào URL tài nguyên sẽ đưa bạn đến bảng điều khiển Mạng, hiển thị thêm thông tin mà bạn có thể sử dụng để xác định nguyên nhân của sự cố.

Bạn có thể lọc các thông báo đó theo cấp độ (Lỗi / Cảnh báo / Thông tin) và cũng có thể lọc chúng theo nội dung.

Những thông báo đó có thể được người dùng tạo trong JavaScript của riêng bạn bằng cách sử dụngAPI bảng điều khiển:

console.log('Some info message')
console.warn('Some warning message')
console.error('Some error message')

Trình giả lập

Công cụ dành cho nhà phát triển của Chrome nhúng một trình giả lập thiết bị rất hữu ích mà bạn có thể sử dụng để trực quan hóa trang của mình ở mọi kích thước thiết bị mà bạn muốn.

The device emulator

Bạn có thể chọn từ các cài đặt trước cho các thiết bị di động phổ biến nhất, bao gồm iPhone, iPad, thiết bị Android, v.v. hoặc tự chỉ định kích thước pixel và độ nét màn hình (1x, 2x retina, 3x retina HD).

Trong cùng một bảng điều khiển, bạn có thể thiết lậpđiều chỉnh mạngcho tab Chrome cụ thể đó, để mô phỏng kết nối tốc độ thấp và xem cách tải trang và “hiển thị các truy vấn phương tiện”Cho bạn biết cách truy vấn phương tiện sửa đổi CSS của trang.


Bảng điều khiển mạng

Bảng điều khiển Mạng của DevTools cho phép bạn xem tất cả các kết nối mà trình duyệt phải xử lý trong khi hiển thị một trang.

The network panel

Trong nháy mắt, trang này hiển thị:

  • thanh công cụ nơi bạn có thể thiết lập một số tùy chọn và bộ lọc
  • một biểu đồ tải của toàn bộ trang
  • mọi yêu cầu đơn lẻ, với phương thức HTTP, mã phản hồi, kích thước và các chi tiết khác
  • chân trang với tóm tắt tổng số yêu cầu, tổng kích thước của trang và một số chỉ báo thời gian.

Một tùy chọn rất hữu ích trong thanh công cụ làbảo quản nhật ký. Bằng cách kích hoạt nó, bạn có thể chuyển sang trang khác và nhật ký sẽ không bị xóa.

Một công cụ rất hữu ích khác để theo dõi thời gian tải làvô hiệu hóa bộ nhớ cache. Điều này cũng có thể được bật trên toàn cầu trong cài đặt DevTools, để luôn tắt bộ nhớ cache khi DevTools đang mở.

Nhấp vào một yêu cầu cụ thể trong danh sách sẽ hiển thị bảng chi tiết, với báo cáo Tiêu đề HTTP:

The HTTP headers report in the network panel

Và phân tích thời gian tải:

The loading time breakdown


Trình gỡ lỗi JavaScript

Nếu bạn nhấp vào thông báo lỗi trong Bảng điều khiển DevTools, tab Nguồn sẽ mở ra và ngoài việc trỏ bạn đến tệp và dòng nơi xảy ra lỗi, bạn có tùy chọn sử dụng trình gỡ lỗi JavaScript.

The Javascript debugger

Đây là một trình gỡ lỗi đầy đủ tính năng. Bạn có thể đặt các điểm ngắt, xem các biến và ngheDOMthay đổi hoặc phá vỡ cụ thểXHR(AJAX) yêu cầu mạng hoặc trình xử lý sự kiện.


Ứng dụng và Lưu trữ

Tab Ứng dụng cung cấp cho bạn nhiều thông tin về thông tin nào được lưu trữ bên trong trình duyệt liên quan đến trang web của bạn.

Application and storage

Lưu trữ

Bạn có quyền truy cập vào các báo cáo chi tiết và các công cụ để tương tác với bộ nhớ ứng dụng:

và bạn có thể nhanh chóng xóa bất kỳ thông tin nào, để bắt đầu với một phương tiện chặn sạch.

Ứng dụng

Tab này cũng cung cấp cho bạn các công cụ để kiểm tra và gỡ lỗi Ứng dụng web tiến bộ.

Nhấp chuộtrõ ràngđể nhận thông tin về tệp kê khai ứng dụng web, được sử dụng để cho phép người dùng di động thêm ứng dụng vào trang chủ của họ và mô phỏng các sự kiện “thêm vào màn hình chính”.

Nhân viên dịch vụcho phép bạn kiểm tra nhân viên dịch vụ ứng dụng của bạn. Nếu bạn không biết service worker là gì, thì nói ngắn gọn, chúng là một công nghệ cơ bản hỗ trợ các ứng dụng web hiện đại, để cung cấp các tính năng như thông báo, khả năng chạy ngoại tuyến và đồng bộ hóa trên các thiết bị.


Tab bảo mật

Tab Bảo mật cung cấp cho bạn tất cả thông tin mà trình duyệt có liên quan đến tính bảo mật của kết nối đến trang web.

The Security Tab

Nếu có bất kỳ sự cố nào với kết nối HTTPS, nếu trang web được cung cấp qua TLS, nó sẽ cung cấp cho bạn thêm thông tin về nguyên nhân gây ra sự cố.


Kiểm toán

Tab Kiểm tra sẽ giúp bạn tìm và giải quyết một số vấn đề liên quan đến hiệu suất và nói chung là chất lượng trải nghiệm mà người dùng có khi truy cập trang web của bạn.

Bạn có thể thực hiện nhiều loại kiểm tra khác nhau tùy thuộc vào loại trang web:

Audits by Lighthouse

Kiểm toán được cung cấp bởiNgọn hải đăng, một công cụ kiểm tra chất lượng trang web tự động mã nguồn mở. Phải mất một lúc để chạy, sau đó nó cung cấp cho bạn một báo cáo rất đẹp với các hành động chính cần kiểm tra.

Lighthouse audit report


Nếu bạn muốn biết thêm về Công cụ dành cho nhà phát triển của Chrome, hãy xem phần nàyDanh sách Mẹo dành cho nhà phát triển của Chrome😀


Các hướng dẫn khác dành cho devtools: