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

Kayce Basques
Kayce Basques
X GitHub

Các tính năng mới sắp ra mắt trong Công cụ cho nhà phát triển của Chrome 65 bao gồm:

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

Ghi đè cục bộ

Tính năng Ghi đè cục bộ cho phép bạn thực hiện các thay đổi trong Công cụ cho nhà phát triển và giữ nguyên những thay đổi đó khi 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. Local Overrides (Ghi đè cục bộ) hoạt động với hầu hết các loại tệp, trừ một số trường hợp ngoại lệ. Xem phần Các điểm hạn chế.

Duy trì một thay đổi về CSS trong các lần tải trang bằng tính năng Ghi đè cục bộ.

Hình 1 Duy trì thay đổi CSS sau mỗi lần tải trang bằng tính năng Ghi đè cục bộ

Cách hoạt động:

  • Bạn chỉ định một thư mục mà Công cụ cho nhà phát triển sẽ lưu các thay đổi.
  • Khi bạ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ộ đã sửa đổi thay vì tài nguyên mạng.

Cách thiết lập Local Overrides (Thông tin ghi đè cục bộ):

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

  2. Mở thẻ Overrides (Ghi đè).

    Thẻ Thay thế

    Hình 2. Thẻ Ghi đè

  3. Nhấp vào Setup Overrides (Thiết lập chế độ ghi đè).

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

  5. Ở đầu khung hiển thị, hãy nhấp vào 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.

  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 Nguồn.
  • Nếu bạn chỉnh sửa CSS trong ngăn Kiểu và nguồn của CSS đó là một tệp HTML, thì DevTools sẽ không lưu thay đổi. Thay vào đó, hãy chỉnh sửa tệp HTML trong bảng Nguồn.
  • Không gian làm việc. Công cụ cho nhà phát triển tự động ánh xạ các tài nguyên mạng đến một 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 những 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ẻ Changes (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 các thuộc tính hỗ trợ tiếp cận của một phần tử và kiểm tra tỷ lệ tương phản của các phần tử văn bản trong Bộ chọn màu để đảm bảo rằng 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 phần tử đó.

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

Sử dụng ngăn Hỗ trợ tiếp cận trên ngăn Phần tử để tìm hiểu các thuộc tính hỗ trợ tiếp cận của phần tử hiện được chọn.

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

Hình 4. Ngăn Accessibility (Hỗ trợ tiếp cận) cho thấy các thuộc tính ARIA và thuộc tính được tính toán cho phần tử hiện được chọn trong DOM Tree (Cây DOM) trên ngăn Elements (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ề việc gắn nhãn bên dưới để xem ngăn Hỗ trợ tiếp cận hoạt động.

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

Công cụ chọn màu hiện cho bạn biết tỷ lệ tương phản của các phần tử văn bản. Việc tăng tỷ lệ tương phản của các phần tử văn bản giúp người dùng bị suy giảm thị lực hoặc khiếm thị màu sắc dễ dàng 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 sắc của các phần tử văn bản sẽ giúp tất cả người dùng sử dụng trang web của bạn dễ dàng hơn. Nói cách khác, nếu văn bản của bạn có màu xám trên nền trắng, thì sẽ rất khó đọc.

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 đánh dấu bên cạnh 4.61 có nghĩa là phần tử này đáp ứng tỷ lệ tương phản nâng cao được đề xuất (AAA). Nếu chỉ có một dấu đánh dấu, điều đó có nghĩa là màu sắc đó đá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 phần Tỷ lệ tương phản. Đường màu trắng trong hộp Phổ màu biểu thị ranh giới giữa những màu đáp ứng tỷ lệ tương phản được đề xuất và những màu không đáp ứng. Ví dụ: vì màu xám trong Hình 6 đáp ứng các đề xuất, nên tất cả các màu bên dưới đường màu trắng cũng đáp ứng các đề xuất.

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

Hình 6. Phần Tỷ lệ tương phản được mở rộng

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

Hãy xem phần 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 Kiểm tra nhằm kiểm thử khả năng hỗ trợ tiếp cận.

Kiểm tra mới

Chrome 65 đi kèm với một danh mục hoàn toàn mới về các hoạt động kiểm tra SEO 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 quy trình 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 đi kèm với nhiều quy trình 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ả trên các tài sản tĩnh
  • Tránh chuyển hướng trang
  • Tài liệu sử dụng plugin
  • Giảm bớt CSS
  • Giảm bớt JavaScript

Hiệu suất là yếu tố quan trọng! Sau khi Mynet cải thiện tốc độ tải trang lên gấp 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 các trang nhưng không biết bắt đầu từ đâu, hãy thử bảng Kiểm tra. Bạn cung cấp cho công cụ này một URL và công cụ này sẽ cung cấp cho bạn một báo cáo chi tiết về nhiều cách khác nhau để 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 các worker và mã không đồng bộ

Chrome 65 mang đến các bản cập nhật cho nút Step Into (Bước vào) Chuyển 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 sử dụng hành vi bước trước đó, bạn có thể dùng nút Bước Bước mới.

Đi vào mã truyền thông báo giữa các luồng

Khi bạn chuyển sang mã truyền thông báo giữa các luồng, Công cụ cho nhà phát triển hiện sẽ cho bạn biết điều gì xảy ra trong mỗi 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, DevTools sẽ tạm dừng trong trình xử lý onmessage trong luồng worker. Chính trình xử lý onmessage sẽ đăng một thông báo trở lại luồng chính. Việc chuyển đến lệnh gọi đó sẽ tạm dừng DevTools trong luồng chính.

Đi sâu vào mã truyền thông báo trong Chrome 65.

Hình 8. Đi sâu vào mã truyền thông báo trong Chrome 65

Khi bạn chuyển đến mã như thế này trong các phiên bản Chrome trước, 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.

Đi sâu vào mã truyền thông báo trong Chrome 63.

Hình 9. Bước vào mã truyền thông báo trong Chrome 63

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

Khi chuyển đến mã không đồng bộ, DevTools hiện giả định rằng bạn muốn tạm dừng trong mã không đồng bộ sẽ chạy sau cùng.

Ví dụ: trong Hình 10, sau khi chuyển đến setTimeout(), DevTools sẽ chạy tất cả mã cho đến thời điểm đó ở chế độ nền, rồi tạm dừng trong hàm được truyền đến setTimeout().

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

Hình 10. Bước vào mã không đồng bộ trong Chrome 65

Khi bạn chuyển sang mã như thế này trong Chrome 63, DevTools sẽ tạm dừng trong mã khi mã chạy theo trình tự thời gian, như bạn có thể thấy trong Hình 11.

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

Hình 11 Bước vào mã không đồng bộ trong Chrome 63

Nhiều bản ghi trong bảng điều khiển Hiệu suất

Giờ đây, bảng điều khiển Hiệu suất 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 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 giữa nhiều bản ghi trong bảng điều khiển Hiệu suất.

Hình 12 Chọn giữa nhiều bản ghi trong bảng điều khiển Hiệu suất

Phần thưởng: Tự động hoá các thao tác trên Công cụ cho nhà phát triển bằng Puppeteer 1.0

Puppeteer phiên bản 1.0 (một công cụ tự động hoá trình duyệt do nhóm Chrome DevTools duy trì) hiện đã ra mắt. Bạn có thể dùng Puppeteer để tự động hoá nhiều tác vụ mà trước đây chỉ có thể thực hiện 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();
})();

Nó cũng có các API cho nhiều tác vụ tự động hoá hữu ích nói chung, 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();
})();

Hãy 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 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 cần mở Công cụ cho nhà phát triển để biết ví dụ.

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.