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 ra mắt 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ộ

Tính năng 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 đó qua 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 đều 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, trừ một vài ngoại lệ. Vui lòng xem phần Các điểm hạn chế.

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

Hình 1 Duy trì thay đổi CSS trong các lần 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 sẽ 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 đã sửa đổi trên thiết bị chứ không phải 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 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.

  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 những 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 Styles (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 thay đổi. 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 á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 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

Hãy 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 Công cụ chọn màu để đảm bảo người dùng bị khiếm thị hoặc khiếm khuyết về thị lực có thể truy cập được 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ử để đ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 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ử đang được chọn trong Cây DOM trên bảng điều khiể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 dưới đây để xem ngăn Accessibility (Hỗ trợ tiếp cận) trong thực tế.

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

Công cụ chọn màu giờ đây sẽ hiển thị cho bạn 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 giúp người dùng có thị lực kém hoặc người khiếm thị nhìn thấy màu sắc có thể truy cập trang web của bạn dễ dàng hơn. Xem bài viết Màu sắc và độ tương phản để tìm hiểu thêm về mức độ ảnh hưởng của tỷ lệ tương phản đến 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 thành phần 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 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. Đang 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 nâng cao đề xuất (AAA). Nếu chỉ có một dấu kiểm, điều đó có nghĩa là video đã đá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 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à những màu không đáp ứng 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, điều đó có 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.

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

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

Bảng điều khiển 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 phần Chạy Lighthouse trong Công cụ của Chrome cho nhà phát triển hoặc xem A11ycast dưới đây để 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ần kiểm tra mới

Chrome 65 đi kèm với một hạng mục kiểm tra SEO hoàn toàn mới cùng nhiều quy trình kiểm tra hiệu suất mới.

Quy trình kiểm tra mới về SEO

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 SEO mới của quy trình kiểm tra.

Hình 7. Danh mục kiểm tra mới theo chuẩn SEO

Các cuộc 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ả đố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

Hãy chú ý đến hiệu suất! 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% trang, tỷ lệ thoát giảm 24% và doanh thu tăng 25% cho mỗi lượt xem trang của 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 bắt đầu từ đâu, hãy thử bảng điều khiển Kiểm tra. Bạn cấp cho trang đó một URL và nó sẽ cung cấp cho bạn 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 worker và mã không đồng bộ

Chrome 65 cập nhật cho nút Bước vào Bước vào khi bước vào mã chuyển thông điệp giữa các luồng và mã không đồng bộ. Nếu muố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 điệp giữa các luồng

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

Ví dụ như ứng dụng trong Hình 8 truyền một thông điệp giữa luồng chính và luồng worker. Sau khi thực hiện 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 thực thi. Trình xử lý onmessage sẽ tự đăng một thông báo trở lại luồng chính. Khi bạn chuyển đến lệnh gọi đó, Công cụ cho nhà phát triển sẽ được tạm dừng trở lại trong luồng chính.

Sử dụng mã chuyển thư trong Chrome 65.

Hình 8. Sử dụng mã chuyển thư 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.

Sử dụng mã chuyển thư trong Chrome 63.

Hình 9. Sử dụng mã chuyển thư trong Chrome 63

Chuyển sang mã không đồng bộ

Khi bước sang 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 truy cập 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 và sau đó tạm dừng trong hàm được truyền đến setTimeout().

Chuyển sang mã không đồng bộ trong Chrome 65.

Hình 10. Chuyển sang 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.

Sử dụng mã không đồng bộ trong Chrome 63.

Hình 11 Chuyển sang 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 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 phân tích hiệu suất trong 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

Nội dung bổ sung: 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 thao tá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();
})();

Thư viện này cũng có API cho nhiều tác vụ 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ô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 bài viết 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 để biết ví dụ.

Tải 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 cung cấp cho bạn quyề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, thử nghiệm API nền tảng web tiên tiến và tìm ra sự cố trên trang web của bạn trước khi người dùng của bạn 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 đây để thảo luận về các tính năng mới và thay đổi trong bài đăng hoặc bất cứ vấn đề nào khác liên quan đến Công cụ cho nhà phát triển.

  • Hãy 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ủa Công cụ cho nhà phát triển bằng cách sử dụng phần Tuỳ chọn khác   Thêm   > Trợ giúp > Báo cáo sự cố về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
  • Tweet tại @ChromeDevTools.
  • Hãy để 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 video trên YouTube.

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 video Tính năng mới trong Công cụ cho nhà phát triển.

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

Kiến thức cơ bản về Chrome

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