Thông báo của Công cụ cho nhà phát triển – Chỉnh sửa phần tử một cách hiệu quả, gỡ lỗi cho trình chạy dịch vụ và các sắc độ thiết kế của Material Design

Paul Bakaus
Paul Bakaus

Sử dụng trình đơn theo bối cảnh mới của bảng điều khiển DOM để chỉnh sửa các nút một cách hiệu quả. Gỡ lỗi trình chạy dịch vụ trực tiếp thông qua bảng điều khiển Tài nguyên. Chọn trong số tất cả các sắc thái Material Design trong công cụ chọn màu. Dễ dàng hơn trong việc kiểm thử hộp đen các thư viện JS.

Trình đơn theo bối cảnh mới, cải tiến của bảng điều khiển DOM

Trình đơn theo bối cảnh DOM mới.

Chúng tôi đã phân tích các thao tác được sử dụng nhiều nhất trong bảng điều khiển DOM và kết luận rằng trình đơn theo bối cảnh nhấp chuột phải phải được sắp xếp lại và gọn gàng.

Giờ đây, bạn có thể dễ dàng ẩn hoặc xoá một phần tử, kích hoạt một trạng thái nhất định như :active hoặc :hover hoặc chỉnh sửa HTML của phần tử đó. Nếu bạn đang dùng bàn di chuột và không muốn phải nhấp chuột phải, hãy nhấp vào biểu tượng ba dấu chấm nhỏ bên cạnh phần tử đã chọn.

Gỡ lỗi trình chạy dịch vụ thông qua bảng điều khiển Tài nguyên

Nhân viên dịch vụ là những người tuyệt vời sau khi bạn thiết lập nhưng họ có thể gặp khó khăn khi phải làm quen với bạn ngay từ đầu. Điều này càng trở nên tệ hơn khi việc gỡ lỗi các trình này yêu cầu bạn phải rời khỏi Công cụ của Chrome cho nhà phát triển và mở chrome://serviceworker-internals/ trong một cửa sổ trình duyệt mới.

Trình chạy dịch vụ trong Tài nguyên

Giờ đây, bạn không cần phải làm vậy nữa! Giờ đây, bạn có thể gỡ lỗi trình chạy dịch vụ cho miền hiện tại ngay trong bảng điều khiển Tài nguyên. Chúng tôi vẫn đang tiếp tục cải thiện, nhưng đã có nhiều điểm cải tiến so với hiện trạng trước đây.

Tất cả màu sắc: sắc độ của thiết kế Material Design trong bộ chọn màu

Vài tuần trước, chúng tôi đã thêm bảng màu Material Design vào công cụ chọn màu để cung cấp cho bạn các màu chính, đậm ngay từ đầu. Để thực sự thiết kế một trang đầy đủ, bạn cần có toàn quyền truy cập vào tất cả các sắc thái Material Design, vì vậy, chúng tôi đã tích hợp sẵn các sắc thái đó.

Để hiển thị sắc độ, hãy nhấn và giữ một trong các màu chính rồi nhấp vào sắc độ.

Dễ dàng hơn trong việc kiểm tra thư viện JavaScript hộp đen trong phần cài đặt

Tính năng đóng hộp đen JavaScript đã xuất hiện được một thời gian nhưng không dễ phát hiện. Đây là một tính năng cho phép bạn đóng hộp đen một tập lệnh trên trang để chỉ tập trung vào mã do bạn viết (và ẩn tất cả mã bao bọc).

Chúng tôi đã chuyển mục này vào phần Cài đặt. Hãy thử:

Hộp đen

Tốt nhất trong phần còn lại

  • Thiếu quyền truy cập vào nút bật/tắt Kết xuất? Rendering Settings (Cài đặt kết xuất) đã được chuyển sang trình đơn chính của DevTools (trong phần "More Tools" (Công cụ khác)). Ngoài các mục thường thấy (tức là FPS meter (Đồng hồ FPS)), chúng tôi cũng đã chuyển "Emulate print media" (Mô phỏng phương tiện in) vào đó.
  • Bạn đã chán nhập chrome://inspect vào thanh địa chỉ? Giờ đây, bạn cũng có thể tìm thấy tính năng Kiểm tra thiết bị trong trình đơn chính mới trong phần "Công cụ khác".
  • Bạn vô tình đóng một trong các thẻ Ngăn có thể đóng như Kết xuất hoặc Tìm kiếm? Giờ đây, bạn có thể mở lại các ứng dụng đó bằng trình đơn mới ở bên trái.

Như thường lệ, hãy cho chúng tôi biết ý kiến của bạn qua Twitter hoặc bình luận bên dưới, đồng thời gửi lỗi đến crbug.com/new.

Đến tháng sau!
Paul Bakaus và nhóm Công cụ cho nhà phát triển