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

Kayce Basques

Sau đây là các tính năng mới có trong Công cụ cho nhà phát triển trong Chrome 65:

Đọc tiếp hoặc xem phiên bản video của những ghi chú phát hành này ở bên dưới.

Ghi đè cục bộ

Ghi đè cục bộ cho phép bạn thực hiện thay đổi trong Công cụ cho nhà phát triển và giữ lại những thay đổi đó trong các lần tải trang. Trước đây, mọi thay đổi mà bạn thực hiện trong Công cụ cho nhà phát triển sẽ bị mất khi bạn tải lại trang. Tính năng Ghi đè cục bộ hoạt động với hầu hết các loại tệp, với một vài trường hợp ngoại lệ. Xem Các điểm hạn chế.

Duy trì thay đổi CSS trong các lượt tải trang bằng cơ chế Ghi đè cục bộ.

Hình 1 Duy trì thay đổi CSS trong các lượt tải trang bằng tính năng Ghi đè cục bộ

Quy trình như sau:

  • Bạn chỉ định một thư mục mà Công cụ cho nhà phát triển nên lưu các thay đổi.
  • Khi bạn thực hiện thay đổi trong Công cụ cho nhà phát triển, Công cụ cho nhà phát triển sẽ lưu một bản sao của tệp đã sửa đổi vào thư mục của bạn.
  • Khi bạn tải lại trang, Công cụ cho nhà phát triển sẽ phân phát tệp cục bộ đã được sửa đổi, thay vì tài nguyên mạng.

Cách thiết lập Ghi đè cục bộ:

  1. Mở bảng điều khiển Sources (Nguồn).

  2. Mở thẻ Ghi đè.

    Thẻ Ghi đè

    Hình 2. Thẻ Ghi đè

  3. Nhấp vào Thiết lập cơ chế ghi đè.

  4. Chọn thư mục bạn muốn lưu các thay đổi.

  5. Ở đầu khung nhìn, hãy nhấp vào Allow (Cho phép) để cấp cho Công cụ cho nhà phát triển quyền đọc và ghi vào thư mục này.

  6. Thực hiện thay đổi.

Các điểm hạn chế

  • Công cụ cho nhà phát triển không lưu các thay đổi được thực hiện trong Cây DOM của bảng điều khiển Phần tử. Thay vào đó, hãy chỉnh sửa HTML trong bảng điều khiển Sources (Nguồn).
  • Nếu bạn chỉnh sửa CSS trong ngăn Kiểu và nguồn của CSS đó là tệp HTML, thì Công cụ cho nhà phát triển sẽ không lưu thay đổi đó. Thay vào đó, hãy chỉnh sửa tệp HTML trong bảng điều khiển Nguồn.
  • Không gian làm việc. Công cụ cho nhà phát triển tự động ánh xạ tài nguyên mạng đến kho lưu trữ cục bộ. Bất cứ khi nào bạn thực hiện thay đổi trong Công cụ cho nhà phát triển, thay đổi đó cũng sẽ được lưu vào kho lưu trữ cục bộ của bạn.

Thẻ Thay đổi

Theo dõi các thay đổi mà bạn thực hiện cục bộ trong Công cụ cho nhà phát triển thông qua thẻ Thay đổi mới.

Thẻ Thay đổi

Hình 3. Thẻ Thay đổi

Công cụ hỗ trợ tiếp cận mới

Sử dụng ngăn Hỗ trợ tiếp cận mới để kiểm tra thuộc tính hỗ trợ tiếp cận của một phần tử, đồng thời kiểm tra tỷ lệ tương phản của các phần tử văn bản trong Công cụ chọn màu để đảm bảo người dùng bị suy giảm thị lực hoặc khiếm thị có thể truy cập vào các thành phần đó.

Ngăn hỗ trợ tiếp cận

Sử dụng ngăn Accessibility (Hỗ trợ tiếp cận) trên bảng Elements (Phần tử) để điều tra các thuộc tính hỗ trợ tiếp cận của phần tử đang được chọn.

Ngăn Hỗ trợ tiếp cận

Hình 4. Ngăn Accessibility (Hỗ trợ tiếp cận) hiển thị các thuộc tính ARIA và thuộc tính đã tính toán cho phần tử hiện được chọn trong Cây DOM trên bảng Phần tử, cũng như vị trí của phần tử đó trong cây hỗ trợ tiếp cận

Hãy xem A11ycast của Rob Dodson về nhãn bên dưới để xem ngăn Accessibility (Hỗ trợ tiếp cận) hoạt động như thế nào.

Tỷ lệ tương phản trong Công cụ chọn màu

Giờ đây, Công cụ chọn màu sẽ cho bạn thấy tỷ lệ tương phản của các thành phần văn bản. Việc tăng tỷ lệ tương phản của các thành phần văn bản sẽ giúp người dùng khiếm thị hoặc khiếm thị màu dễ truy cập vào trang web của bạn hơn. Hãy xem phần Màu sắc và độ tương phản để tìm hiểu thêm về cách tỷ lệ tương phản ảnh hưởng đến khả năng hỗ trợ tiếp cận.

Việc cải thiện độ tương phản màu cho các thành phần văn bản giúp trang web của bạn trở nên dễ sử dụng hơn cho tất cả người dùng. Nói cách khác, nếu văn bản có màu xám trên nền trắng, thì sẽ khó đọc được.

Đang kiểm tra tỷ lệ tương phản của phần tử H1 được làm nổi bật.

Hình 5. Kiểm tra tỷ lệ tương phản của phần tử h1 được làm nổi bật

Trong Hình 5, hai dấu kiểm bên cạnh 4.61 có nghĩa là phần tử này đáp ứng tỷ lệ tương phản đề xuất nâng cao (AAA). Nếu chỉ có một dấu kiểm, tức là ảnh đó đáp ứng tỷ lệ tương phản tối thiểu được đề xuất (AA).

Nhấp vào biểu tượng Hiện thêm Hiện thêm để mở rộng mục Tỷ lệ tương phản. Đường màu trắng trong hộp Ph phổ màu biểu thị ranh giới giữa các màu đáp ứng tỷ lệ tương phản được đề xuất và màu không đạt được tỷ lệ tương phản được đề xuất. Ví dụ: vì màu xám trong Hình 6 đáp ứng các đề xuất, nghĩa là tất cả các màu bên dưới đường màu trắng cũng đáp ứng đề xuất.

Phần Tỷ lệ tương phản đã mở rộng.

Hình 6. Mục Tỷ lệ tương phản đã mở rộng

Bảng điều khiển Inspections (Kiểm tra) có tính năng kiểm tra khả năng hỗ trợ tiếp cận tự động để đảm bảo rằng mọi thành phần văn bản trên trang đều có đủ tỷ lệ tương phản.

Xem bài viết Chạy Lighthouse trong Công cụ của Chrome cho nhà phát triển hoặc xem A11ycast bên dưới để tìm hiểu cách sử dụng bảng điều khiển Audits (Kiểm tra) để kiểm thử khả năng hỗ trợ tiếp cận.

Lượt kiểm tra mới

Chrome 65 mang đến danh mục kiểm tra SEO hoàn toàn mới và nhiều hoạt động kiểm tra hiệu suất mới.

Kiểm tra SEO mới

Việc đảm bảo các trang của bạn vượt qua từng bài kiểm tra trong danh mục SEO mới có thể giúp cải thiện thứ hạng của bạn trên công cụ tìm kiếm.

Danh mục kiểm tra SEO mới.

Hình 7. Danh mục kiểm tra SEO mới

Kiểm tra hiệu suất mới

Chrome 65 cũng cung cấp nhiều công cụ kiểm tra hiệu suất mới:

  • Thời gian khởi động JavaScript cao
  • Sử dụng chính sách bộ nhớ đệm không hiệu quả đối với các tài sản tĩnh
  • Tránh chuyển hướng trang
  • Tài liệu sử dụng trình bổ trợ
  • Giảm thiểu CSS
  • Thu nhỏ JavaScript

Thật là quan trọng! Sau khi Mynet cải thiện tốc độ tải trang lên 4 lần, người dùng dành thêm 43% thời gian trên trang web, xem thêm 34% số trang, tỷ lệ thoát giảm 24% và doanh thu tăng 25% cho mỗi lượt xem trang bài viết. Tìm hiểu thêm.

Mẹo! Nếu bạn muốn cải thiện hiệu suất tải của trang, nhưng không biết phải bắt đầu từ đâu, hãy thử bảng điều khiển Kiểm tra. Bạn sẽ cung cấp cho bạn một URL và báo cáo chi tiết về nhiều cách mà bạn có thể cải thiện trang đó. Bắt đầu.

Thông tin cập nhật khác

Bước mã đáng tin cậy với worker không đồng bộ

Chrome 65 mang đến nội dung cập nhật cho nút Bước vào Bước vào khi bước vào mã truyền thông báo giữa các luồng và mã không đồng bộ. Nếu muốn thực hiện hành vi bước trước đó, bạn có thể sử dụng nút Bước Step mới.

Bước vào mã chuyển thông báo giữa các luồng

Khi bạn bước vào mã truyền thông báo giữa các luồng, Công cụ cho nhà phát triển giờ đây sẽ cho bạn biết điều gì xảy ra trong từng luồng.

Ví dụ: ứng dụng trong Hình 8 truyền một thông báo giữa luồng chính và luồng worker. Sau khi bước vào lệnh gọi postMessage() trên luồng chính, Công cụ cho nhà phát triển sẽ tạm dừng trong trình xử lý onmessage trong luồng worker. Trình xử lý onmessage sẽ tự đăng lại một thông báo lên luồng chính. Bước vào lệnh gọi đó sẽ tạm dừng Công cụ cho nhà phát triển trở lại trong luồng chính.

Bước vào mã chuyển tin nhắn trong Chrome 65.

Hình 8. Bước vào mã chuyển tin nhắn trong Chrome 65

Khi bạn bước vào mã như thế này trong các phiên bản Chrome trước đây, Chrome chỉ cho bạn thấy phía luồng chính của mã, như bạn có thể thấy trong Hình 9.

Bước vào mã chuyển tin nhắn trong Chrome 63.

Hình 9. Bước vào mã chuyển tin nhắn trong Chrome 63

Bước vào mã không đồng bộ

Khi bước vào mã không đồng bộ, Công cụ cho nhà phát triển hiện giả định rằng bạn muốn tạm dừng trong mã không đồng bộ mà cuối cùng sẽ chạy.

Ví dụ: trong Hình 10 sau khi bước vào setTimeout(), Công cụ cho nhà phát triển sẽ chạy tất cả mã dẫn đến điểm đó ở hậu trường, sau đó tạm dừng trong hàm được truyền đến setTimeout().

Tiếp cận mã không đồng bộ trong Chrome 65.

Hình 10. Tiếp cận mã không đồng bộ trong Chrome 65

Khi bạn bước vào mã như thế này trong Chrome 63, Công cụ cho nhà phát triển đã tạm dừng trong mã khi chạy theo trình tự thời gian, như bạn có thể thấy trong Hình 11.

Tiếp cận mã không đồng bộ trong Chrome 63.

Hình 11 Tiếp cận mã không đồng bộ trong Chrome 63

Nhiều bản ghi âm trong bảng Hiệu suất

Bảng Hiệu suất hiện cho phép bạn tạm thời lưu tối đa 5 bản ghi. Các bản ghi sẽ bị xoá khi bạn đóng cửa sổ Công cụ cho nhà phát triển. Hãy xem bài viết Bắt đầu sử dụng tính năng phân tích hiệu suất thời gian chạy để làm quen với bảng điều khiển Hiệu suất.

Chọn trong số nhiều bản ghi âm trong bảng Hiệu suất.

Hình 12 Chọn trong số nhiều bản ghi âm trong bảng Hiệu suất

Bật mí thêm cho bạn: Tự động hoá các thao tác trong Công cụ cho nhà phát triển bằng Puppeteer 1.0

Phiên bản 1.0 của Puppeteer, một công cụ tự động hoá trình duyệt do nhóm Công cụ của Chrome cho nhà phát triển duy trì, hiện đã ra mắt. Bạn có thể sử dụng Puppeteer để tự động hoá nhiều tác vụ trước đây chỉ có thông qua Công cụ cho nhà phát triển, chẳng hạn như chụp ảnh màn hình:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
  await browser.close();
})();

API này cũng có các API cho nhiều công việc tự động hoá thường hữu ích, chẳng hạn như tạo tệp PDF:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'hn.pdf', format: 'A4'});
  await browser.close();
})();

Xem phần Bắt đầu nhanh để tìm hiểu thêm.

Bạn cũng có thể sử dụng Puppeteer để hiển thị các tính năng của Công cụ cho nhà phát triển trong khi duyệt web mà không cần mở Công cụ cho nhà phát triển một cách rõ ràng. Hãy xem ví dụ ở phần Sử dụng các tính năng của Công cụ cho nhà phát triển mà không mở Công cụ cho nhà phát triển.

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ố trong 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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

Chrome 101

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

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59