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

Jecelyn Yeen

Xoá Bảng điều khiển hiệu suất khi tải lại

Bảng điều khiển Hiệu suất hiện xoá cả ảnh chụp màn hình và dấu vết khi bạn nhấp vào nút Bắt đầu lập hồ sơ và tải lại trang.

Trước đây, bảng điều khiển Hiệu suất hiển thị dòng thời gian có ảnh chụp màn hình từ các bản ghi trước đó. Điều này khiến bạn khó biết được thời điểm bắt đầu đo lường thực tế. Giờ đây, bảng điều khiển luôn chuyển đến trang about:blank trước tiên để đảm bảo rằng bản ghi bắt đầu bằng một dấu vết trống. Điều này phù hợp với bảng điều khiển Thông tin chi tiết về hiệu suất đã thực hiện tương tự.

Xoá Bảng điều khiển hiệu suất khi tải lại.

Vấn đề về Chromium: 1101268, 1382044

Thông tin cập nhật về ứng dụng Máy ghi âm

Xem và làm nổi bật mã của luồng người dùng trong Trình ghi

Trình ghi hiện cung cấp chế độ xem mã phân tách, giúp bạn dễ dàng xem mã luồng người dùng. Để truy cập vào chế độ xem mã, hãy mở một luồng người dùng rồi nhấp vào Hiện mã.

Trình ghi làm nổi bật mã tương ứng khi bạn di chuột qua từng bước ở bên trái, giúp bạn dễ dàng theo dõi luồng của mình. Bạn có thể thay đổi định dạng mã bằng trình đơn thả xuống. Trình đơn này cho phép bạn chuyển đổi giữa các định dạng như tập lệnh Kiểm thử Nightwatch.

Chế độ xem mã trong Trình ghi.

Vấn đề về Chromium: 1385489

Tuỳ chỉnh loại bộ chọn của bản ghi

Bạn có thể tạo bản ghi chỉ ghi lại các loại bộ chọn quan trọng với bạn. Với tuỳ chọn mới để tuỳ chỉnh các loại bộ chọn khi tạo bản ghi mới, bạn có thể đưa vào hoặc loại trừ các bộ chọn như XPath, đảm bảo bạn chỉ ghi lại những bộ chọn mà bạn muốn trong luồng người dùng.

Tuỳ chọn mới để tuỳ chỉnh các loại bộ chọn.

Vấn đề về Chromium: 1384431

Chỉnh sửa luồng người dùng trong khi ghi

Máy ghi âm hiện cho phép chỉnh sửa trong khi ghi, giúp bạn linh hoạt thay đổi theo thời gian thực. Bạn không cần phải kết thúc bản ghi để điều chỉnh nữa.

Chỉnh sửa trong khi ghi luồng người dùng.

Vấn đề về Chromium: 1381971

Tự động in đẹp tại chỗ

Giờ đây, bảng điều khiển Sources (Nguồn) sẽ tự động in đẹp các tệp nguồn đã rút gọn. Bạn có thể nhấp vào nút in đẹp { } để huỷ thao tác này.

Trước đây, bảng điều khiển Nguồn hiển thị nội dung rút gọn theo mặc định. Để định dạng nội dung, bạn phải nhấp vào nút in đẹp theo cách thủ công. Ngoài ra, nội dung được in đẹp không xuất hiện trong cùng một thẻ, mà trong một thẻ ::formatted khác.

Hiển thị tệp rút gọn trước và sau khi tự động in đẹp tại chỗ.

Vấn đề về Chromium: 1383453, 1382752, 1382397

Làm nổi bật cú pháp và xem trước cùng dòng hiệu quả hơn cho Vue, SCSS và nhiều ngôn ngữ khác

Bảng điều khiển Sources (Nguồn) đã cải thiện tính năng làm nổi bật cú pháp cho một số định dạng tệp được sử dụng rộng rãi, cho phép bạn đọc mã dễ dàng hơn và nhận ra cấu trúc của mã, bao gồm cả Vue, JSX, Dart, LESS, SCSS, SASS và CSS nội tuyến.

Làm nổi bật cú pháp trong Vue.

Ngoài ra, Công cụ của nhà phát triển cũng cải thiện tính năng xem trước cùng dòng cho Vue, HTML cùng dòng và TSX. Di chuột qua một biến để xem trước giá trị của biến đó.

Bản xem trước nội tuyến cho Vue.

Ngoài ra, DevTools hiện hiển thị bản đồ nguồn của một tệp định kiểu trong bảng điều khiển Nguồn. Ví dụ: khi mở tệp SCSS, bạn có thể truy cập vào tệp CSS có liên quan bằng cách nhấp vào đường liên kết bản đồ nguồn.

Đường liên kết đến bản đồ nguồn cho SASS.

Vấn đề về Chromium: 1385374, 1385632, 1385281, 1385269, 1383892, 1361862, 1383451, 1392106, 1149734

Tính năng Tự động hoàn thành nhất quán và phù hợp với người dùng trong Console

DevTools cải thiện trải nghiệm tự động hoàn thành bằng cách triển khai các thay đổi sau:

  • Tab luôn được dùng để tự động hoàn thành.
  • Hành vi của Arrow right và Enter thay đổi tuỳ theo ngữ cảnh.
  • Trải nghiệm tự động hoàn thành nhất quán trên các trình soạn thảo văn bản, trong bảng điều khiển Console (Bảng điều khiển), Sources (Nguồn) và Elements (Thành phần)

Ví dụ: sau đây là những gì sẽ xảy ra khi bạn nhập cons vào Console:

  • Console (Bảng điều khiển) hiển thị danh sách các đề xuất tự động hoàn thành, với đường viền chấm xung quanh tuỳ chọn trên cùng cho biết thao tác điều hướng chưa bắt đầu. Đường viền chấm xung quanh tuỳ chọn tự động hoàn thành trên cùng.

  • Console (Bảng điều khiển) sẽ thực thi dòng này khi bạn nhấn Enter. Trước đây, tính năng này sẽ tự động hoàn thành dòng bằng đề xuất hàng đầu. Để tự động hoàn tất, hãy nhấn phím Tab hoặc Arrow Right. Thực thi dòng trên Enter.

  • Console làm nổi bật tuỳ chọn đã chọn khi bạn di chuyển qua danh sách đề xuất bằng các phím tắt Arrow up và Arrow down. Điểm nổi bật trong quá trình điều hướng theo đề xuất.

  • Để tự động hoàn thành bằng tuỳ chọn đã chọn trong quá trình điều hướng, hãy sử dụng các phím Tab, Enter hoặc Arrow Right. Tự động hoàn thành bằng tuỳ chọn đã chọn trong khi điều hướng.

  • Ví dụ: khi chỉnh sửa ở giữa mã, khi con trỏ nằm giữa n và s, hãy sử dụng Tab để tự động hoàn thành, Enter để thực thi dòng và Arrow Right để di chuyển con trỏ về phía trước. Chỉnh sửa ở giữa mã.

Vấn đề về Chromium: 1399436, 1276960

Thông tin nổi bật khác

Sau đây là một số bản sửa lỗi đáng chú ý trong bản phát hành này:

  • Đã giải quyết vấn đề hồi quy trong DevTools, trong đó không thể dừng tại câu lệnh debugger trong tập lệnh nội tuyến. (1385374)
  • Chế độ cài đặt Console (Bảng điều khiển) mới cho phép bạn mở rộng hoặc thu gọn thông báo console.trace() theo mặc định. Bật/tắt chế độ cài đặt thông qua Settings (Cài đặt) > Preferences (Lựa chọn ưu tiên) > Expand console.trace() messages by default (Mở rộng thông báo console.trace() theo mặc định). (1139616)
  • Ngăn Snippets (Mảnh) trong bảng điều khiển Sources (Nguồn) hỗ trợ tính năng tự động hoàn thành nâng cao, tương tự như Console. (772949) Tính năng tự động hoàn thành trong Đoạn mã.

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 sử dụng 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 vấn đề trên trang web của mình trước khi người dùng phát hiện ra!

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.