What are browser developer tools?

Cách mở devtools trong trình duyệt

Devtools nằm bên trong trình duyệt của bạn trong một cửa sổ con trông đại khái như thế này, tùy thuộc vào trình duyệt bạn đang sử dụng:

Làm thế nào để mở nó? Ba cách:

• Bàn phím:

  • Windows: Ctrl + Shift + I hoặc F12
  • macOS: ⌘ + ⌥ + I

• Thanh menu:

  • Firefox: Menu (☰) ➤ More tools ➤ Web Developer Tools

  • Chrome: More tools ➤ Developer tools

  • Opera: Developer ➤ Developer tools

  • Safari: Develop ➤ Show Web Inspector.

    Note: Công cụ dành cho nhà phát triển Safari không được bật theo mặc định. Để bật chúng, hãy đến Safari ➤ Preferences ➤ Advanced và chọn hộp kiểm Show Develop menu in menu bar hoặc Enable features for web developers.

• Menu ngữ cảnh: Nhấn và giữ/nhấp chuột phải vào một mục trên trang web (Ctrl-click trên Mac), và chọn Inspect Element từ menu ngữ cảnh xuất hiện. (Thêm lợi ích: phương thức này ngay lập tức tô sáng code của phần tử bạn đã nhấp chuột phải.)

Trình kiểm tra: Khám phá DOM và chỉnh sửa CSS

Công cụ dành cho nhà phát triển thường mở mặc định đến trình kiểm tra, trông giống như ảnh chụp màn hình sau. Công cụ này hiển thị HTML của trang của bạn trông như thế nào lúc chạy, cũng như CSS nào được áp dụng cho từng phần tử trên trang. Nó cũng cho phép bạn sửa đổi ngay lập tức HTML và CSS và thấy kết quả thay đổi của bạn được phản ánh trực tiếp trong khung nhìn trình duyệt.

Nếu bạn không thấy trình kiểm tra,

• Firefox: Chọn tab Inspector.
• Các trình duyệt khác: Chọn tab Elements.

Khám phá trình kiểm tra DOM

Để bắt đầu, nhấp chuột phải (Ctrl-click) vào một phần tử HTML trong trình kiểm tra DOM và xem menu ngữ cảnh. Các tùy chọn menu có sẵn thay đổi giữa các trình duyệt, nhưng những cái quan trọng hầu hết đều giống nhau:

• Delete Node (đôi khi là Delete Element). Xóa phần tử hiện tại.
• Edit as HTML (đôi khi là Add attribute/Edit text). Cho phép bạn thay đổi HTML và xem kết quả ngay lập tức. Rất hữu ích để gỡ lỗi và kiểm thử.
• :hover/:active/:focus. Ép buộc trạng thái phần tử được bật, để bạn có thể xem kiểu dáng của chúng sẽ trông như thế nào.
• Copy/Copy as HTML. Sao chép HTML hiện đang được chọn.
• Một số trình duyệt cũng có sẵn Copy CSS Path và Copy XPath, để cho phép bạn sao chép bộ chọn CSS hoặc biểu thức XPath để chọn phần tử HTML hiện tại.

Hãy thử chỉnh sửa DOM của bạn ngay bây giờ. Nhấp đúp vào một phần tử, hoặc nhấp chuột phải và chọn Edit as HTML từ menu ngữ cảnh. Bạn có thể thực hiện bất kỳ thay đổi nào bạn muốn, nhưng bạn không thể lưu các thay đổi của mình.

Khám phá trình chỉnh sửa CSS

Theo mặc định, trình chỉnh sửa CSS hiển thị các quy tắc CSS được áp dụng cho phần tử hiện đang được chọn:

Những tính năng này đặc biệt hữu ích:

• Các quy tắc được áp dụng cho phần tử hiện tại được hiển thị theo thứ tự từ cụ thể nhất đến ít cụ thể nhất.
• Nhấp vào hộp kiểm bên cạnh mỗi khai báo để xem điều gì sẽ xảy ra nếu bạn xóa khai báo đó.
• Nhấp vào mũi tên nhỏ bên cạnh mỗi thuộc tính tốc ký để hiển thị các thuộc tính dài tương đương.
• Nhấp vào tên thuộc tính hoặc giá trị để hiển thị hộp văn bản, nơi bạn có thể nhập giá trị mới để xem trước trực tiếp sự thay đổi kiểu dáng.
• Bên cạnh mỗi quy tắc là tên tệp và số dòng nơi quy tắc được định nghĩa. Nhấp vào quy tắc đó sẽ khiến công cụ dành cho nhà phát triển nhảy để hiển thị nó trong chế độ xem riêng của nó, nơi thường có thể chỉnh sửa và lưu.
• Bạn cũng có thể nhấp vào dấu ngoặc nhọn đóng của bất kỳ quy tắc nào để hiển thị hộp văn bản trên một dòng mới, nơi bạn có thể viết một khai báo hoàn toàn mới cho trang của mình.

Bạn sẽ nhận thấy một số tab có thể nhấp ở đầu CSS Viewer:

• Computed: Hiển thị các kiểu tính toán cho phần tử hiện đang được chọn (các giá trị cuối cùng, được chuẩn hóa mà trình duyệt áp dụng).
• Layout: Hiển thị thông tin chi tiết cho các chế độ bố cục CSS grid và flexbox nếu phần tử bạn đang kiểm tra sử dụng chúng.
• Fonts: Trong Firefox và Safari, tab Fonts hiển thị các phông chữ được áp dụng cho phần tử hiện tại.

Chế độ xem box model biểu diễn trực quan mô hình hộp của phần tử hiện tại, để bạn có thể thấy ngay lập tức padding, border và margin nào được áp dụng cho nó, và nội dung của nó có kích thước bao nhiêu. Trong Firefox, điều này nằm trong tab Layout, và trong các trình duyệt khác nằm trong tab Computed.

Trong một số trình duyệt, các chi tiết JavaScript của phần tử được chọn cũng có thể được xem trong ngăn này. Trong Safari, chúng được thống nhất dưới tab Node, nhưng nằm trong các tab riêng biệt trong Chrome, Opera và Edge.

• Properties: Các thuộc tính của đối tượng phần tử.
• Event Listeners: Các sự kiện liên kết với phần tử.

Tìm hiểu thêm

Tìm hiểu thêm về Trình kiểm tra trong các trình duyệt khác nhau:

• Firefox Page inspector
• Chrome DOM inspector (Trình kiểm tra của Opera và Edge giống nhau)
• Safari Elements tab

Trình gỡ lỗi JavaScript

Trình gỡ lỗi JavaScript cho phép bạn theo dõi giá trị của các biến và đặt điểm dừng (breakpoint), những vị trí trong code mà bạn muốn tạm dừng thực thi và xác định các vấn đề ngăn code của bạn thực thi đúng cách.

Để đến trình gỡ lỗi:

Firefox: Mở Công cụ dành cho nhà phát triển và chọn tab Debugger. Các trình duyệt khác: Mở Công cụ dành cho nhà phát triển và chọn tab Sources.

Khám phá trình gỡ lỗi

Trình gỡ lỗi JavaScript của mỗi trình duyệt được chia thành ba ngăn. Bố cục của chúng có phần khác nhau tùy thuộc vào trình duyệt bạn đang sử dụng; hướng dẫn này sử dụng Firefox làm tham chiếu.

Danh sách tệp

Ngăn đầu tiên ở bên trái chứa danh sách các tệp liên kết với trang bạn đang gỡ lỗi. Chọn tệp bạn muốn làm việc từ danh sách này. Nhấp vào tệp để chọn nó và xem nội dung của nó trong ngăn giữa của Trình gỡ lỗi.

Code nguồn

Đặt điểm dừng nơi bạn muốn tạm dừng thực thi. Trong hình ảnh sau, phần tô sáng trên số 18 cho thấy dòng đó có điểm dừng được đặt.

Biểu thức theo dõi và điểm dừng

Ngăn bên phải hiển thị danh sách các biểu thức theo dõi bạn đã thêm và các điểm dừng bạn đã đặt.

Trong hình ảnh, phần đầu tiên, Watch expressions, cho thấy biến listItems đã được thêm. Bạn có thể mở rộng danh sách để xem các giá trị trong mảng.

Phần tiếp theo, Breakpoints, liệt kê các điểm dừng được đặt trên trang. Trong example.js, một điểm dừng đã được đặt trên câu lệnh listItems.push(inputNewItem.value);

Hai phần cuối chỉ xuất hiện khi code đang chạy.

Phần Call stack hiển thị cho bạn biết code nào đã được thực thi để đến dòng hiện tại. Bạn có thể thấy rằng code nằm trong hàm xử lý click chuột, và rằng code hiện đang dừng tại điểm dừng.

Phần cuối cùng, Scopes, hiển thị những giá trị nào có thể nhìn thấy từ các điểm khác nhau trong code của bạn. Ví dụ, trong hình ảnh bên dưới, bạn có thể thấy các đối tượng có sẵn cho code trong hàm addItemClick.

Tìm hiểu thêm

Tìm hiểu thêm về trình gỡ lỗi JavaScript trong các trình duyệt khác nhau:

• Firefox JavaScript Debugger)
• Chrome Debugger (Trình gỡ lỗi của Opera và Edge giống nhau)
• Safari Sources tab

Bảng điều khiển JavaScript

Bảng điều khiển JavaScript là công cụ cực kỳ hữu ích để gỡ lỗi JavaScript không hoạt động như mong đợi. Nó cho phép bạn chạy các dòng JavaScript trên trang hiện đang được tải trong trình duyệt, và báo cáo các lỗi gặp phải khi trình duyệt cố gắng thực thi code của bạn.

Để truy cập bảng điều khiển trong bất kỳ trình duyệt nào, hãy mở công cụ dành cho nhà phát triển và chọn tab Console. Điều này sẽ cho bạn một cửa sổ như sau:

Để xem điều gì xảy ra, hãy thử nhập các đoạn code sau vào bảng điều khiển lần lượt (và sau đó nhấn Enter):

alert("hello!");

document.querySelector("html").style.backgroundColor = "purple";

const loginImage = document.createElement("img");
loginImage.setAttribute(
  "src",
  "https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png",
);
document.querySelector("h1").appendChild(loginImage);

Bây giờ hãy thử nhập các phiên bản lỗi sau đây của code và xem bạn nhận được gì.

alert("hello!);

document.cheeseSelector("html").style.backgroundColor = "purple";

const loginImage = document.createElement("img");
banana.setAttribute(
  "src",
  "https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png",
);
document.querySelector("h1").appendChild(loginImage);

Bạn sẽ bắt đầu thấy loại lỗi mà trình duyệt trả về. Thông thường những lỗi này khá khó hiểu, nhưng sẽ khá đơn giản để tìm ra những vấn đề này!

Tìm hiểu thêm

Tìm hiểu thêm về bảng điều khiển JavaScript trong các trình duyệt khác nhau:

• Firefox Web Console
• Chrome JavaScript Console (Bảng điều khiển của Opera và Edge giống nhau)
• Safari Console Object API và Console Command Line API

Xem thêm

• Gỡ lỗi HTML
• Gỡ lỗi CSS