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

Kayce Basques

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

Hãy đọc tiếp hoặc xem phiên bản video của các 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 DevTools và giữ lại các thay đổi đó trong quá trình tải trang. Trước đây, mọi thay đổi bạn thực hiện trong DevTools 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, ngoại trừ một số trường hợp. Xem Các điểm hạn chế.

Duy trì thay đổi 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 trên các 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à DevTools sẽ lưu các thay đổi.
  • Khi bạn thực hiện thay đổi trong DevTools, DevTools 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 đã sửa đổi trên máy, thay vì tài nguyên mạng.

Cách thiết lập tính năng 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 mà 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 DevTools 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 điều khiển Nguồn.
  • Nếu bạn chỉnh sửa CSS trong ngăn Styles (Kiểu) và nguồn của CSS đó là 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 điều khiển Sources (Nguồn).
  • Không gian làm việc. Công cụ cho nhà phát triển tự động liên kết tài nguyên mạng với kho lưu trữ cục bộ. Bất cứ khi nào bạn thực hiện thay đổi trong DevTools, 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 DevTools 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ị khiếm thị hoặc khiếm thị màu có thể sử dụng 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 bảng điều khiển Phần tử để kiểm 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 Hỗ trợ tiếp cận hiển thị các thuộc tính ARIA và thuộc tính được tính toán cho phần tử đang được chọn trong Cây DOM trên ngăn 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 như thế nào.

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

Color Picker (Công cụ chọn màu) hiện cho bạn thấy 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 sẽ giúp trang web của bạn dễ tiếp cận hơn đối với những người dùng bị khiếm thị hoặc khiếm thị màu. Hãy xem phần Màu sắc và độ tương phản để tìm hiểu thêm về ảnh hưởng của tỷ lệ tương phản đối với khả năng hỗ trợ tiếp cận.

Việc cải thiện độ tương phản màu của các phần tử văn bản giúp trang web của bạ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ủa bạn có màu xám với nền trắng, thì mọi người sẽ 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 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 được đề xuất nâng cao (AAA). Nếu chỉ có một dấu kiểm, thì tức là màu đó đã đá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 Color Spectrum (Phổ màu) thể hiện ranh giới giữa các màu đáp ứng tỷ lệ tương phản được đề xuất và các màu không đáp ứng. 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 các đề xuất.

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

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

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

Hãy xem bài viết Chạy Lighthouse trong Chrome DevTools hoặc xem A11ycast bên dưới để tìm hiểu cách sử dụng bảng điều khiển Kiểm tra nhằm kiểm tra khả năng hỗ trợ tiếp cận.

Quy trình 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 rằng 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 trong các 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 thành phần tĩnh
  • Tránh chuyển hướng trang
  • Tài liệu sử dụng trình bổ trợ
  • Giảm bớt CSS
  • Giảm bớt JavaScript

Hiệu suất quan trọng! Sau khi Mynet cải thiện tốc độ tải trang gấp 4 lần, người dùng dành nhiều thời gian hơn 43% 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ử sử dụng bảng điều khiển Kiểm tra. Bạn chỉ cần cung cấp 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 để 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 và mã không đồng bộ

Chrome 65 cập nhật 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 Bước 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, DevTools 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. Trình xử lý onmessage tự đăng một thông báo trở lại 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ã truyền tin trong Chrome 65.

Hình 8. Bước vào mã truyền tin 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, Chrome chỉ hiển thị cho bạn bên luồng chính của mã, như bạn có thể thấy trong Hình 9.

Bước vào mã truyền tin 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ộ, DevTools hiện giả định rằng bạn muốn tạm dừng trong mã không đồng bộ cuối cùng sẽ chạy.

Ví dụ: trong Hình 10 sau khi bước vào setTimeout(), DevTools sẽ chạy tất cả mã dẫn đến điểm đó ở chế độ nền, sau đó 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 bước vào mã như thế này trong Chrome 63, DevTools sẽ tạm dừng trong mã khi mã chạy theo trình tự, 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

Bảng điều khiển 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ổ DevTools. 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 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 trong DevTools 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ể thực hiện thông qua DevTools, 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();
})();

Thư viện này 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 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.

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.