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

Kayce Basques
Kayce Basques

Chào mừng bạn đến với phần khác của ghi chú phát hành Công cụ cho nhà phát triển. Xem video bên dưới hoặc đọc tiếp để xem tính năng mới trong Công cụ của Chrome cho nhà phát triển 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ẻ Phạm vi bao phủ mới. Khi bạn tải hoặc chạy một trang, thẻ này cho bạn biết lượng mã đã được sử dụng, so với lượng mã đã tải xong. Bạn có thể giảm kích thước của trang bằng cách chỉ gửi mã mà bạn cần.

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

Khi nhấp vào một URL, bạn sẽ thấy tệp đó trong bảng điều khiển Sources (Nguồn) kèm theo bảng chi tiết những dòng mã được thực thi.

Bảng chi tiết về mức độ sử dụng 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 đậm có nghĩa là dòng mã được thực thi.
  • Màu đỏ đồng nhất có nghĩa là lệnh này không thực thi.
  • Một dòng mã có cả màu đỏ và 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ụ: 3 ngôi biểu thức như var b = (a > 0) ? a : 0 được tô màu cả đỏ và 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 thị mức độ phù hợp.

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

Xem video dưới đây để tìm hiểu cách chụp ảnh màn hình từ trên cùng của trang, tận cùng cho đến cuối trang.

Chặn yêu cầu

Muốn biết trang của bạn hoạt động như thế nào khi một tập lệnh, biểu định kiểu cụ thể hoặc không có tài nguyên nào khác? Nhấp chuột phải vào yêu cầu đó trong Network (Mạng) rồi chọn Chặn yêu cầu URL. Thẻ Yêu cầu chặn mới bật lên trong Ngăn, cho phép bạn quản lý các yêu cầu bị chặn.

Chặn URL yêu cầu

Bước qua chế độ không đồng bộ đang chờ

Cho đến bây giờ, việc cố gắng duyệt qua mã như đoạn mã dưới đây là đau đầu. Bạn sẽ ở giữa test(), bước qua một đường, sau đó bạn sẽ bị gián đoạn bởi mã setInterval(). Giờ đây, khi bạn thực hiện mã không đồng bộ như test(), trong Công cụ cho nhà phát triển các bước từ dòng đầu tiên đến dòng cuối cùng bằng 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: muốn nâng cao kỹ năng gỡ lỗi của mình? Hãy xem các tài liệu mới sau đây:

Các thay đổi

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

Bây giờ, khi bạn mở Trình đơn lệnh, hãy lưu ý rằng lệnh được thêm vào trước ký tự lớn hơn (>). Đó là vì Lệnh Trình đơn đã được hợp nhất với trình đơn Mở tệp, tức là Command+O (máy Mac) hoặc Control+O (Windows, Linux).

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

Hãy cân nhắc việc sử dụng Chrome Canary, Nhà phát triển hoặc Beta làm trình duyệt phát triển mặc định của bạn. 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 Công cụ cho nhà phát triển, kiểm thử các API nền tảng web tiên tiến và tìm ra các vấn đề trên trang web của bạn trước khi người dùng làm điều đó!

Liên hệ với nhóm Công cụ của Chrome cho nhà phát triển

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

  • Gửi đề xuất hoặc phản hồi cho chúng tôi qua crbug.com.
  • Báo cáo sự cố Công cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác   Thêm > Trợ giúp > Báo cáo vấn đề về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
  • Tweet tại @ChromeDevTools.
  • Để lại bình luận về Tính năng mới trong Video trên YouTube của Công cụ cho nhà phát triển hoặc Mẹo video trên YouTube trong 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.