Register for this year’s #ChromeDevSummit happening on Nov. 11-12 in San Francisco to learn about the latest features and tools coming to the Web. Request an invite on the Chrome Dev Summit 2019 website

Có gì mới trong DevTools (Chrome 65)

Powered by Google Translate

Các tính năng mới sắp tới với DevTools trong Chrome 65 bao gồm:

Đọ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 đè

Ghi đè cục bộ cho phép bạn thực hiện thay đổi trong DevTools và giữ những thay đổi đó trên các lần 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. Ghi đè cục bộ hoạt động đối với hầu hết các loại tệp, với một vài ngoại lệ. Xem Limitations .

Persisting a CSS change across page loads with Local Overrides.
Figure 1. Persisting a CSS change across page loads with Local Overrides

Làm thế nào nó hoạt động:

  • Bạn chỉ định thư mục nơi DevTools lưu các thay đổi.
  • Khi bạn thực hiện thay đổi trong DevTools, DevTools 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, DevTools phục vụ tệp được sửa đổi cục bộ, chứ không phải tài nguyên mạng.

Để thiết lập Ghi đè cục bộ:

  1. Mở bảng Nguồn. 1. Mở tab Ghi đè.

    The Overrides tab
    Figure 2. The Overrides tab

  2. Nhấp vào Ghi đè thiết lập. 1. Chọn thư mục bạn muốn lưu thay đổi. 1. Ở đầu chế độ xem của bạn, nhấp vào Cho phép để cấp cho DevTools khả năng đọc và ghi vào thư mục. 1. Thực hiện thay đổi của bạn.

Giới hạn

  • DevTools không lưu các thay đổi được thực hiện trong DOM Tree của bảng điều khiển Elements. Chỉnh sửa HTML trong bảng Nguồn thay thế.
  • Nếu bạn chỉnh sửa CSS trong khung Kiểu và nguồn của CSS đó là một tệp HTML, 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.
  • Workspaces . DevTools tự động ánh xạ tài nguyên mạng tới một 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 được lưu vào kho lưu trữ cục bộ của bạn.

Tab Thay đổi

Theo dõi các thay đổi bạn thực hiện cục bộ trong DevTools thông qua tab Thay đổi mới.

The Changes tab
Figure 3. The Changes tab

Công cụ trợ năng mới

Sử dụng ngăn Trợ năng mới để kiểm tra các thuộc tính trợ năng 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 chúng có thể truy cập được với người dùng bị khiếm thị hoặc màu sắc kém hình dung thiếu sót.

năng

Sử dụng ngăn Accessibility trên bảng điều khiển Elements để điều tra thuộc tính trợ năng của phần tử hiện được chọn.

The Accessibility pane shows the ARIA attributes and computed
            properties for the element that's currently selected in the DOM Tree of
            the Elements panel, as well as its position in the accessibility tree.
Figure 4. The Accessibility pane shows the ARIA attributes and computed properties for the element that's currently selected in the DOM Tree on the Elements panel, as well as its position in the accessibility tree

Hãy xem A11ycast của Rob Dodson trên nhãn bên dưới để xem cửa sổ Accessibility đang hoạt động.

Tỷ lệ tương phản ### trong Bộ chọn màu

Color Picker bây giờ 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 yếu tố văn bản làm cho trang web của bạn dễ truy cập hơn đối với người dùng bị khiếm thị kém hoặc thiếu thị lực. Xem Color and contrast để tìm hiểu thêm về cách tỷ lệ tương phản ảnh hưởng đến khả năng truy cập.

Cải thiện độ tương phản màu của các yếu tố văn bản làm cho 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 màu trắng thì thật khó để mọi người đọc.

Inspecting the contrast ratio of the highlighted H1 element.
Figure 5. Inspecting the contrast ratio of the highlighted h1 element

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 enhanced recommended contrast ratio (AAA) . Nếu nó chỉ có một dấu kiểm, điều đó có nghĩa là nó đã đáp ứng được minimum recommended contrast ratio (AA) .

Nhấp vào Hiển thị thêm! Show More để mở rộng Tỷ lệ tương phản. Đường màu trắng trong hộp Color Spectrum đại diện cho ranh giới giữa các màu thỏa mãn tỷ lệ tương phản được khuyến nghị và các màu không phù hợp. Ví dụ: vì màu xám trong Hình 6 đáp ứng các khuyến nghị, điều đó có nghĩa là tất cả các màu bên dưới đường màu trắng cũng đều đáp ứng các khuyến nghị.

The expanded Contrast Ratio section.
Figure 6. The expanded Contrast Ratio section

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

Xem Run Lighthouse in 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 để kiểm tra khả năng truy cập.

mới

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

Kiểm tra SEO mới

Đảm bảo rằng các trang của bạn vượt qua mỗi lần kiểm tra trong danh mục SEO mới có thể giúp cải thiện thứ hạng công cụ tìm kiếm của bạn.

The new SEO category of audits.
Figure 7. The new SEO category of audits

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

Chrome 65 cũng có nhiều 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ộ đệm không hiệu quả trên 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

Các cập nhật khác

Mã đáng tin cậy với công nhân và mã không đồng bộ

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

Bước vào mã chuyển các thông điệp giữa các chủ đề

Khi bạn bước vào mã chuyển các thông điệp giữa các luồng, DevTools sẽ hiển thị cho bạn những gì xảy ra trong mỗi luồng.

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

Stepping into message-passing code in Chrome 65.
Figure 8. Stepping into message-passing code in Chrome 65

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

Stepping into message-passing code in Chrome 63.
Figure 9. Stepping into message-passing code in Chrome 63

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

Khi bước vào mã không đồng bộ, DevTools bây giờ giả định rằng bạn muốn tạm dừng trong mã không đồng bộ mà cuối cùng chạy.

Ví dụ, trong Hình 10 sau khi bước vào setTimeout() , DevTools chạy tất cả các mã dẫn đến điểm đó đằng sau hậu trường, và sau đó tạm dừng trong hàm được chuyển đến setTimeout() .

Stepping into asynchronous code in Chrome 65.
Figure 10. Stepping into asynchronous code in Chrome 65

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

Stepping into asynchronous code in Chrome 63.
Figure 11. Stepping into asynchronous code in Chrome 63

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

Bảng điều khiển Hiệu suất hiện cho phép bạn lưu tạm thời tối đa 5 bản ghi. Bản ghi âm sẽ bị xóa khi bạn đóng cửa sổ DevTools. Xem Get Started with Analyzing Runtime Performance để cảm thấy thoải mái với bảng điều khiển Hiệu suất.

Selecting between multiple recordings in the Performance panel.
Figure 12. Selecting between multiple recordings in the Performance panel

Tiền thưởng ## : Tự động hóa các hành động DevTools với Puppeteer 1.0

Phiên bản 1.0 của Puppeteer, một công cụ tự động hóa trình duyệt được duy trì bởi nhóm Chrome DevTools, hiện đã hết. Bạn có thể sử dụng Puppeteer để tự động hóa nhiều tác vụ trước đây chỉ có sẵ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();
})();

Nó cũng có API cho rất nhiều nhiệm vụ tự động hóa 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();
})();

Xem Quick Start để tìm hiểu thêm.

Bạn cũng có thể sử dụng Puppeteer để trưng ra các tính năng của DevTools trong khi duyệt mà không bao giờ mở DevTools một cách rõ ràng. Xem Using DevTools Features Without Opening DevTools để biết ví dụ.

Một yêu cầu từ nhóm DevTools: xem xét Canary

Nếu bạn đang sử dụng Mac hoặc Windows, hãy xem xét sử dụng Chrome Canary làm trình duyệt phát triển mặc định của bạn. Nếu bạn báo cáo lỗi hoặc thay đổi mà bạn không thích trong khi vẫn còn trong Canary, nhóm DevTools có thể giải quyết phản hồi của bạn nhanh hơn đáng kể.

Phản hồi

Nơi tốt nhất để thảo luận về bất kỳ tính năng hoặc thay đổi nào bạn thấy ở đây là google-chrome-developer-tools@googlegroups.com mailing list . Bạn cũng có thể tweet chúng tôi tại @ChromeDevTools nếu bạn thiếu thời gian. Nếu bạn chắc chắn rằng bạn đã gặp lỗi trong DevTools, hãy open an issue .

Xem thẻ devtools-whatsnew để biết các liên kết đến tất cả các ghi chú phát hành DevTools trước đó.

rss_feed Subscribe to our RSS or Atom feed and get the latest updates in your favorite feed reader!