Chrome 73 có gì mới

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 Chọn Add logpoint trong source

2 - Nó sẽ hiện ra popup, nhập vào đó một cái expression mong muốn Popup để nhập expression Nhập giá trị biến trong cửa sổ popup

Để 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. Nhập giá trị biến trong cửa sổ popup

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

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

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. mở cửa sổ Command
  3. Gõ vào đoạn text coverage

Chọn Coverage Cửa sổ Coverage

  1. Click Reload Reload để tiến hành analyze
  2. Click nút Export 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

Focusing a link

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

Focusing another link

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

The AA line (top) and AAA line (bottom)

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

Command Menu Sensors tab

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

Geolocations tab in Settings

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

Code Folding

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

Lines 54 to 65 have been folded

Để 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

Messages tab

Xem video ở đây