Tính năng mới trong Công cụ cho nhà phát triển (Chrome 59)

Kayce Basques
Kayce Basques
X GitHub

Chào mừng bạn đến với một phần khác trong ghi chú phát hành của Công cụ cho nhà phát triển. Xem video bên dưới hoặc đọc tiếp để biết các tính năng mới trong Công cụ cho nhà phát triển của Chrome trong Chrome 59!

Điểm nổi bật

Tính năng mới

Mức độ sử dụng mã CSS và JS

Tìm mã CSS và JS không dùng đến bằng thẻ Mức sử dụng mới. Khi bạn tải hoặc chạy một trang, thẻ này sẽ cho biết lượng mã đã dùng so với lượng mã đã tải. Bạn có thể giảm kích thước trang bằng cách chỉ phân phối mã mà bạn cần.

Thẻ Mức độ phù hợp

Khi bạn nhấp vào một URL, tệp đó sẽ xuất hiện trong bảng điều khiển Nguồn cùng với thông tin chi tiết về những dòng mã đã thực thi.

Bảng chi tiết mức độ phù hợp của mã trong bảng điều khiển Nguồn

Mỗi dòng mã được mã hoá bằng màu:

  • Màu xanh lục đặc có nghĩa là dòng mã đó đã được thực thi.
  • Màu đỏ đặc có nghĩa là lệnh không thực thi.
  • Một dòng mã vừa có màu đỏ vừa có màu xanh lục, chẳng hạn như dòng 3 trong ảnh chụp màn hình ở trên, có nghĩa là chỉ một số mã trên dòng đó được thực thi. Ví dụ: biểu thức bậc ba như var b = (a > 0) ? a : 0 có cả màu đỏ và màu xanh lục.

Cách mở thẻ Phạm vi bao phủ:

  1. Mở Trình đơn lệnh.
  2. Bắt đầu nhập Coverage rồi chọn Hiện phạm vi cung cấp.

Ảnh chụp màn hình toàn trang

Hãy xem video bên dưới để tìm hiểu cách chụp ảnh màn hình từ đầu trang xuống cuối trang.

Chặn yêu cầu

Bạn muốn xem trang của mình hoạt động như thế nào khi một tập lệnh, biểu định kiểu hoặc tài nguyên khác không có sẵn? Nhấp chuột phải vào yêu cầu trong bảng điều khiển Mạng rồi chọn Chặn URL yêu cầu. Một thẻ Chặn yêu cầu mới sẽ xuất hiện trong Ngăn kéo, cho phép bạn quản lý các yêu cầu bị chặn.

Chặn URL của yêu cầu

Nhảy cóc qua chế độ không đồng bộ/chờ

Cho đến nay, việc cố gắng thực hiện từng bước qua mã như đoạn mã dưới đây là một việc rất khó khăn. Bạn sẽ ở giữa test(), bước qua một dòng rồi bị gián đoạn bởi mã setInterval(). Giờ đây, khi bạn thực hiện từng bước qua mã không đồng bộ như test(), Công cụ cho nhà phát triển sẽ thực hiện từng bước từ dòng đầu tiên đến dòng cuối cùng một cách nhất quán.

  function wait(ms) {
    return new Promise(r => setTimeout(r, ms)).then(() => "Yay");
  }

  // do some work in background.
  setInterval(() => 42, 200);

  async function test() {
    debugger;
    const hello = "world";
    const response = await fetch('index.html');
    const tmp = await wait(1000);
    console.log(tmp);
    return hello;
  }

  async function runTest() {
    let result = await test();
    console.log(result);
  }

Tái bút: Bạn muốn nâng cao kỹ năng gỡ lỗi? Hãy xem những tài liệu mới này:

Các thay đổi

Trình đơn lệnh hợp nhất

Khi bạn mở Trình đơn lệnh ngay bây giờ, hãy lưu ý rằng lệnh của bạn có thêm ký tự lớn hơn (>) ở phía trước. Điều này là do Trình đơn lệnh đã được hợp nhất với trình đơn Mở tệp. Trình đơn này có tổ hợp phím Command+O (Mac) hoặc Control+O (Windows, Linux).

Tải các kênh xem trước xuống

Hãy cân nhắc sử dụng Chrome Canary, Dev hoặc Beta làm trình duyệt phát triển mặc định. Các kênh xem trước này cho phép bạn truy cập vào các tính năng mới nhất của DevTools, kiểm thử các API nền tảng web tiên tiến và giúp bạn tìm thấy các vấn đề trên trang web của mình trước khi người dùng tìm thấy!

Liên hệ với nhóm Chrome DevTools

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng mới, nội dung cập nhật hoặc bất kỳ nội dung nào khác liên quan đến Công cụ cho nhà phát triển.

Tính năng mới trong Công cụ cho nhà phát triển

Danh sách mọi nội dung đã được đề cập trong loạt bài Tính năng mới trong Công cụ cho nhà phát triển.