Menu

  • Trang chủ
  • Trending
  • Gợi ý bạn đọc

Chuyên mục

  • Tin tức
  • Hackintosh
  • Lập trình
  • Software
  • Thủ thuật
  • Chia sẻ
  • GenZA Can Cook
  • GenZA Beauty
  • Cảm nhận cuộc sống

Liên hệ hợp tác

admin@genzakit.com
Genzakit
Không có kết quả phù hợp
Xem tất cả kết quả
  • Đăng nhập
Genzakit
Không có kết quả phù hợp
Xem tất cả kết quả

Chrome DevTools của Google Chrome 78 có gì mới?

391
CHIA SẺ
2.6k
LƯỢT XEM
Chia sẻ lên FacebookChia sẻ lên TwitterLưu lại trên Pinterest

Master chrome devtool là cần thiết cho một frontend developer, mình sẽ bắt đầu series cập nhập những tính năng mới nhất của Chrome, theo như lộ trình định sẵn thì cứ 6 tuần nó sẽ có bản cập nhập mới cho Chrome

Kết hợp Audit với các tính năng khác

Bên trong cửa sổ Audit, chúng ta có thể dùng kết hợp với các tính năng khác của DevTools như Request blocking (để chặn request đến một resource nào đó) và Local Overrides (cho phép dùng một file dưới local để thay cho file đang chạy thực tế)
Ví dụ, Audits cho kết quả 70 điểm hiệu năng, nó đề nghị chúng ta bỏ qua một sổ resource block lại quá trình render

eliminating render-blocking resources Hình 1 – Nhận được 70 điểm hiệu năng

Hình 2 – Có 3 đoạn script đang ảnh hưởng đến render
Giờ trong cửa sổ Audit này, chúng ta mở cửa sổ request blocking

Using the Request Blocking tab to block the problematic scripts. Hình 3 – Sử dụng Request blocking để chặn, ko load các đoạn script là nguyên nhân của block render

Hình 4 – Sau khi đã bỏ qua các đoạn script này, chúng ta nhận được kết quả điểm Audit là 97
Bạn có thể tự làm lại để nhớ cho lâu

Công cụ debug Payment Handler

Payment Handler là một một API mới của web để xử lý các thao tác liên quan đến tiền trao, cháo múc. Bạn có thể đọc thêm về Payment Handler API ở đây
Trong phần Background services của cửa sổ Application sẽ có thêm công cụ để debug API này

  1. Mở DevTools, vào tab Application
  2. Chọn Payment Handler trong cột bên trái
  3. Click Record. DevTools sẽ lưu lại các sự kiện của Payment Handler trong 3 ngày, ngay cả khi đã đóng DevTools
  4. Bật Show events from other domains nếu các sự kiện Payment xảy ra trên các tên miền khác (thường là vậy, chúng ta dùng dịch vụ của bên thứ 3 như Visa)
  5. Khi có sự kiện Payment, từng dòng thông tin sẽ được lưu lại


Lighthouse 5.2

Audit sử dụng phiên bản Lighthouse 5.2 (thật ra được đưa vào từ Chrome 77, nhưng mấy bạn ở Google quên note lại cho bà con, giờ mới note lại)
Bổ sung chẩn đoán Third-Party Usage cho chúng ta dánh sách các file đang được request từ bên ngoài và đoạn code đó nó ảnh hưởng thế nào lên main thread khi trang được load

Đứa nào chiếm Contentful Paint lớn nhất

Khi đánh giá hiệu năng của trang trong tab Performance, chổ Timings sẽ có một ô đánh dấu là LCP (Largest Contentful Paint), nó là thời gian render của element kích thước lớn nhất trên viewport

Để biết nó là DOM nào

  1. Click vào cái marker LCP
  2. Chổ Related Node trong phần Summary bên dưới, click vào element đang có

Gửi issue của DevTools cho team Google

Nếu bạn phát hiện bất kỳ con bug nào của DevTools, hoặc yêu cầu một tính năng nào đó cần thiết cho DevTools, gửi ngay cho team này ở Google.
Main Menu > Help > Report a DevTools issue

Source: Youtube
Từ khoá: chrome devtoolsgoogle chrome
Next Post

Website tự học web front-end và web configuration chất lượng

Theo dõi
Đăng nhập
Thông báo của
guest
guest
0 Comments
Phản hồi nội tuyến
Xem tất cả bình luận

Có thể bạn quan tâm

Cách làm thịt ngâm mắm ăn cực ngon

Cách làm thịt ngâm mắm ăn cực ngon

by Huệ Minh
9 Tháng Mười, 2021
0
2.6k

Thịt ngâm nước mắm là món ăn khá đưa cơm, à mà không chỉ đưa cơm, món ăn...

Hướng dẫn chi tiết cách thiết lập eSIM Viettel trên Apple Watch

by Anthony Tran
4 Tháng Mười Hai, 2019
0
2.6k

Sau bao ngày chờ đợi, Viettel đã không làm thất vọng fan Táo khuyết khi nhà mạng này...

7 thói quen không tốt ảnh hưởng đến bộ não của bạn

7 thói quen không tốt ảnh hưởng đến bộ não của bạn

by Huệ Minh
28 Tháng Chín, 2021
0
2.6k

Có nhiều thói quen xấu dưới đây ảnh hưởng đến não bộ, nhưng việc trùm chăn khi ngủ...

Cách nấu mì vịt tiềm

Cách nấu mì vịt tiềm

by Huệ Minh
28 Tháng Mười, 2021
0
2.6k

Vịt tiềm là món ăn ngon nổi tiếng có nguồn gốc từ Trung Hoa. Vịt tiềm hay mì...

  • Giới thiệu
  • Liên hệ
  • Chính sách bảo mật

© 2023 Genzakit

Không có kết quả phù hợp
Xem tất cả kết quả
  • Trending
  • Gợi ý bạn đọc
  • Tin tức
  • Hackintosh
  • Lập trình
  • Software
  • Thủ thuật
  • Chia sẻ
  • GenZA Can Cook
  • GenZA Beauty
  • Vui mỗi ngày
  • Cảm nhận cuộc sống

© 2022 Genzakit - Ngôi nhà giới trẻ

Chào mừng trở lại!

Đăng nhập bằng Facebook
Sign In with Google
OR

Đăng nhập

Quên mật khẩu?

Retrieve your password

Please enter your username or email address to reset your password.

Đăng nhập
wpDiscuz