Trang này được dịch bởi Cloud Translation API.

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 khác của ghi chú phát hành Công cụ cho nhà phát triển. Hãy xem video dưới đây hoặc đọc tiếp để biết tính năng mới trong Công cụ của Chrome cho nhà phát triển ở Chrome 59!

Tiêu điểm

Mức độ phù hợp của mã CSS và JS. Tìm các CSS và JS không dùng đến trong thẻ Mức độ phù hợp 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 khung nhìn đến dưới cùng.
Chặn yêu cầu. Tắt từng yêu cầu theo cách thủ công trong bảng điều khiển Mạng.
Bước qua chế độ không đồng bộ đang chờ. Duyệt 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 độ phù hợp của mã CSS và JS

Tìm mã CSS và JS không dùng đến trong thẻ Phạm vi lập chỉ mục mới. Khi bạn tải hoặc chạy một trang, thẻ 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 của mình bằng cách chỉ gửi 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 thông tin chi tiết về những dòng mã được thực thi.

Bảng chi tiết 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 liền nét có nghĩa là dòng mã đã được thực thi.
Màu đỏ liền mạch có nghĩa là hàm 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ỉ có một số mã trên dòng đó được thực thi. Ví dụ: một biểu thức 3 ngôi như var b = (a > 0) ? a : 0 có cả màu đỏ và màu xanh lục.

Cách mở thẻ Phạm vi lập chỉ mục:

Mở Trình đơn lệnh.
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

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ó tập lệnh, biểu định kiểu hoặc tài nguyên khác? Nhấp chuột phải vào yêu cầu trong bảng điều khiển Network (Mạng) rồi chọn Block Request URL (Chặn URL yêu cầu). Thẻ Yêu cầu chặn mới sẽ xuất hiệ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 nay, việc cố gắng duyệt qua mã như đoạn mã dưới đây là một vấn đề rắc rối. Bạn sẽ ở giữa test(), bước qua một dòng và sau đó bị mã setInterval() làm gián đoạn. Giờ đây, khi bạn bước qua mã không đồng bộ như test(), Công cụ cho nhà phát triển sẽ thực hiện các bước từ dòng đầu tiên đến dòng cuối cùng với tính 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 của mình? Hãy xem các tài liệu kiểu mới sau đây:

Các thay đổi

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

Tải 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 cung cấp cho bạn quyề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, thử nghiệm API nền tảng web tiên tiến và tìm ra sự cố trên trang web của bạn trước khi người dùng của bạn 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 đây để thảo luận về các tính năng mới và thay đổi trong bài đăng hoặc bất cứ vấn đề nào khác liên quan đến Công cụ cho nhà phát triển.

Hãy 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ủa Công cụ cho nhà phát triển bằng cách sử dụng phần Tuỳ chọn khác > Trợ giúp > Báo cáo sự cố về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
Tweet tại @ChromeDevTools.
Hãy để 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 video trên YouTube.

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 video Tính năng mới trong Công cụ cho nhà phát triển.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Kiến thức cơ bản về Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 đã bị huỷ.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Trực quan hoá các chỉ số hiệu suất trong bảng Hiệu suất
Làm nổi bật các nút văn bản trong Cây DOM
Sao chép đường dẫn JS vào nút DOM
Cập nhật bảng điều khiển Kiểm tra, bao gồm cả nội dung kiểm tra mới giúp phát hiện các thư viện JS và từ khóa mới để truy cập vào bảng điều khiển Kiểm tra từ Trình đơn lệnh
Mẹo hay: Sử dụng Chế độ thiết bị để kiểm tra truy vấn về nội dung nghe nhìn (video)