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

Kayce Basques

Chào mừng bạn đến với phần tiếp theo của ghi chú phát hành DevTools. Hãy xem video bên dưới hoặc đọc tiếp để biết những tính năng mới trong Chrome DevTools trong Chrome 59!

Điểm nổi bật

• Mức độ sử dụng mã CSS và JS. Tìm CSS và JS không sử dụng bằng thẻ Mức độ sử dụng mới.
• Ảnh chụp màn hình toàn trang. Chụp ảnh màn hình toàn bộ trang, từ đầu đến cuối khung nhìn.
• Chặn yêu cầu. Tắt từng yêu cầu trong bảng điều khiển Mạng theo cách thủ công.
• Bỏ qua lệnh chờ không đồng bộ. Bước qua các hàm không đồng bộ theo dự đoán.
• Trình đơn lệnh hợp nhất. Thực thi các lệnh và mở tệp từ Trình đơn lệnh mới hợp nhất.

Tính năng mới

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

Tìm mã CSS và JS không sử dụng 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 bạn biết lượng mã đã được sử dụng so với lượng mã đã được tải. Bạn có thể giảm kích thước trang bằng cách chỉ gửi mã mà bạn cần.

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 thông tin chi tiết về những dòng mã được thực thi.

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 đỏ đậm có nghĩa là lệnh không được 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ụ: biểu thức ba ngôi như var b = (a > 0) ? a : 0 được tô 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.

Ả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 cho đến 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 không có một tập lệnh, tệp kiểu hoặc tài nguyên cụ thể nào đó? 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ẽ bật lên trong Ngăn, cho phép bạn quản lý các yêu cầu bị chặn.

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

Cho đến nay, việc cố gắng tìm hiểu mã như đoạn mã dưới đây là một điều phiền toái. Bạn sẽ ở giữa test(), bước qua một dòng, sau đó mã setInterval() sẽ làm gián đoạn bạn. Giờ đây, khi bạn thực hiện từng bước trong mã không đồng bộ như test(), DevTools sẽ thực hiện các 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 các tài liệu mới sau đây:

• Bắt đầu gỡ lỗi JS
• Tạm dừng mã bằng điểm ngắt
• Tài liệu tham khảo về gỡ lỗi JS

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ủa bạn sẽ được thêm ký tự lớn hơn (>). Điều này là do Trình đơn lệnh đã được hợp nhất với trình đơn Open File (Mở tệp) là Command+O (máy 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 Công cụ cho nhà phát triển, cho phép bạn kiểm thử các API nền tảng web tiên tiến và giúp bạn phát hiện các vấn đề trên trang web của mình trước người dùng!

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

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng, bản cập nhật mới 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.

• Gửi ý kiến phản hồi và yêu cầu về tính năng cho chúng tôi tại crbug.com.
• Báo cáo sự cố trong Công cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác more_vert > Trợ giúp > Báo cáo sự cố trong Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
• Gửi tweet đến @ChromeDevTools.
• Để lại bình luận về Tính năng mới trong video trên YouTube trong Công cụ cho nhà phát triển hoặc Mẹo về công cụ cho nhà phát triển trong các video trên YouTube.

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

Danh sách tất cả nội dung đã được đề cập trong loạt bài Tính năng mới trong DevTools.