Chrome 73 có gì mới

• Logpoint
• Tooltip hiển thị chi tiết về element trong Inspect mode
• Export dữ liệu code coverage
• Di chuyển bên trong cửa sổ Console bằng phím mũi tên
• Thêm đường contrast đề nghị trong popup Color Picker
• Lưu giá trị Geolocation đã thay đổi
• Code Folding
• Message Tab

Logpoint

Cho phép log message trong cửa sổ Console mà không cần dùng lệnh console.log() bên trong source

Để add logpoint

1 - click phải chuột tại vị trí mong muốn trong source code, chọn Add logpoint

2 - Nó sẽ hiện ra popup, nhập vào đó một cái expression mong muốn

Để nhập giá trị biến, ví dụ TodoApp, đặt tên biến bên trong dấu {} như vầy {TodoApp}

Đọc thêm bài viết Always Log Objects để nắm rõ hơn cú pháp này.

3 - Click vào vùng bên bất kỳ để save, một cái badge màu cam sẽ đánh dấu cho biết đang log ở vị trí đó. click vào cái badge này để bỏ log, giá trị log này sẽ ko bị mất khi bạn refresh trang.

Tooltip hiển thị chi tiết về element trong Inspect mode

Trong khi đang mở chế độ inspect element , nếu đưa chuột lên trên element đó, một cửa sổ nhỏ hiển thị thông tin quan trong như font size, font color, contrast ratio, margin

Export dữ liệu code coverage

Code coverage là kết quả đánh giá có bao nhiêu phần trong code đã được thực thi, xem thêm chi tiết, bây giờ chúng ta có thể export kết quả này ra file json, nội dung file sẽ như sau

[
  {
    "url": "https://wndt73.glitch.me/style.css",
    "ranges": [
      {
        "start": 0,
        "end": 21
      },
      {
        "start": 45,
        "end": 67
      }
    ],
    "text": "body { margin: 1em; } figure { padding: 0; } h1 { color: #317EFB; }"
  },
  ...
]

• url là đường dẫn source file css, hay js đã analyze
• ranges là phần code đã sử dụng, trong đó có start là hàng đầu tiên, đến vị trí end
• text là toàn bộ source code

1. Đầu tiên gọi Control + Shift + P để mở cửa sổ Command
2. 
3. Gõ vào đoạn text coverage

3. Click Reload để tiến hành analyze
4. Click nút Export để xuất file

Di chuyển bên trong cửa sổ Console bằng phím mũi tên

Ấn Shift + Tab bên trong cửa sổ Console

Dùng phím mũi tên lên xuống để di chuyển, trái phải để mở hoặc đóng toàn bộ một node

Thêm đường contrast đề nghị trong popup Color Picker

Popup Color Picker giờ sẽ có thêm một đường nữa gọi là AAA Contrast Ratio recommendation, trước đây chỉ có một đường là AA

Đường ở trên là AA, đường dưới là AAA

Nếu bạn chưa biết, contrast ratio là độ tương phản đề nghị cần có cho chữ và màu nền để người đọc web có thể đọc được nội dung, design thường thích kiểu chữ xám xám trong khi nó rất khó đọc.

Lưu giá trị Geolocation đã thay đổi

Mở cửa sổ Sensors Control + Shift + P, gõ tìm Sensors

Trong mục Geolocation click Manager. Settings > Geolocations trong cửa sổ mới mở ra

Chọn Add location, nhập thông tin xong chọn Add

Code Folding

Trong cửa sổ Source và Network có thể thu gọn code, kiểu collapse ấy

Để bật tính năng này, ấn F1 để vào Settings > Preferences > Source , sau đó chọn mục Code Folding

Message Tab

Cửa sổ Frames giờ đổi tên thành Message, nó chỉ có trong tab Network, dùng để inspect web socket connection

Xem video ở đây