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. Địa phương Cơ chế ghi đè 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 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 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, chứ không phải mạng nguồn.

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, 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ử. Chỉnh sửa HTML trong Thay vào đó, 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, Công cụ cho nhà phát triển sẽ không lưu nội dung 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, thì thay đổi đó cũng đượ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 Accessibility (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ử, và hãy 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 chúng ứng dụng dành cho người dùng bị khiếm thị hoặc khiếm thị màu.

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

Sử dụng ngăn Hỗ trợ tiếp cận trên bảng 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 điều khiển Phần tử, cũng như vị trí 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. Tăng độ tương phản tỷ lệ các thành phần văn bản giúp người dùng khiếm thị hoặc có thị lực kém dễ truy cập vào trang web của bạn hơn khiếm khuyết thị lực. Xem Màu sắc và độ tương phản để tìm hiểu thêm về tỷ lệ tương phản ảnh hưởng đến khả năng 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. Trong 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 chế độ nâng cao tỷ lệ tương phản được đề xuất (AAA). Nếu chỉ có một dấu kiểm, điều đó có nghĩa là trang đá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 Độ tương phản Tỷ lệ. Đườ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à những tỷ lệ không đáp ứng được. 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 nội dung đề 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 Inspects (Kiểm tra) có quy trình 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 một trang có tỷ lệ tương phản đủ.

Xem 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 Kiểm tra để kiểm tra 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

Hãy đảm bảo rằng 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 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 bớt CSS
  • Giảm bớt 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 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 bài viết lượt xem trang. 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 phải bắt đầu từ đâu, hãy thử dùng bảng điều khiển Inspections (Kiểm tra). Bạn cung cấp cho nó một URL và nó cung cấp cho bạn một báo cáo chi tiết về nhiều giúp bạn cải thiện trang đó. Bắt đầu.

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

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

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

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 chuỗi.

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 onmessage trình xử lý trong luồng worker. Trình xử lý onmessage sẽ tự đăng một thông báo trở lại trình xử lý chính chuỗi. 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 đó, Chrome chỉ hiển thị cho bạn phía luồng chính của mã, như 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ộ rồi 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 thời điểm đó phía sau hậu trường và 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ã 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 âm này khi bạn đóng cửa sổ Công cụ cho nhà phát triển. Xem bài viết Bắt đầu sử dụng tính năng phân tích thời gian chạy Hiệu suất để làm quen với bảng 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 đã có bị loại. Bạn có thể sử dụng Puppeteer để tự động hoá nhiều công việc mà trước đây chỉ thực hiện đượ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. 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 kỳ 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ố 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.