nhat.dev
  • Tin tức
  • Dịch vụ
  • Lập trình
    • ReactJS
    • React Native
    • Angular
    • VueJS
  • Hackintosh
    • Hackintosh
    • Opencore
  • Liên hệ
No Result
View All Result
  • Đăng nhập
logo nhat.dev
  • Tin tức
  • Dịch vụ
  • Lập trình
    • ReactJS
    • React Native
    • Angular
    • VueJS
  • Hackintosh
    • Hackintosh
    • Opencore
  • Liên hệ
No Result
View All Result
nhat.dev
No Result
View All Result
Home Lập trình

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

Nhat Tran by Nhat Tran
10 Tháng Mười Một, 2019
Chrome DevTools của Google Chrome 78 có gì mới?
480
SHARES
1.5k
VIEWS
Chia sẻ lên FacebookChia sẻ lên Twitter

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ế)

Có thể bạnquan tâm

Vì sao Flutter là lựa chọn tốt nhất để làm mobile app 2021

4 xu hướng Front-end 2021

Low-code là gì? Tương lai của lập trình

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
Tags: chrome devtoolsgoogle chrome
Bài viết trước

JAMstack là gì? Ưu nhược điểm của JAMstack

Bài viết sau

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

Nhat Tran

Nhat Tran

Chia sẻ vài thứ hay ho bản thân tìm hiểu và tìm kiếm được đến mọi người

Bài viết sau
Website tự học web front-end và web configuration chất lượng

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

Subscribe
Notify of
guest
guest
0 Comments
Inline Feedbacks
View all comments

Recommended.

Kỹ thuật tối ưu hóa truy vấn trong SQL server

Kỹ thuật tối ưu hóa truy vấn trong SQL server

2 Tháng Một, 2020
Một vài tips và tricks cho người mới bắt đầu học React

Một vài tips và tricks cho người mới bắt đầu học React

8 Tháng Sáu, 2019

Trending.

Hướng dẫn cài macOS trên Laptop, PC 2019

Hướng dẫn cài macOS trên Laptop, PC 2019

6 Tháng Chín, 2020
Chuẩn bị kiến thức cơ bản trước khi “vọc” hackintosh

Hướng dẫn tạo bộ cài vanilla hackintosh dễ dàng nhất

6 Tháng Ba, 2020
Cách “lách” bản quyền âm thanh và hình ảnh video Youtube 2020

Cách “lách” bản quyền âm thanh và hình ảnh video Youtube 2020

2 Tháng Mười Một, 2020
Chuẩn bị kiến thức cơ bản trước khi “vọc” hackintosh

Kích hoạt âm thanh trong hackintosh với AppleALC

30 Tháng Mười Một, 2019
Chuẩn bị kiến thức cơ bản trước khi “vọc” hackintosh

Cài đặt Clover vào ổ cứng sau khi cài macOS

30 Tháng Mười Một, 2019
nhat.dev

© 2019 nhat.dev

Chia sẻ chút kiến thức, kinh nghiệm, thủ thuật mà bản thân đã tìm hiểu và đọc được với mọi người

  • About me
  • Privacy & Policy
  • Advertise
  • Contact

Theo dõi tôi

No Result
View All Result
  • Tin tức
  • Dịch vụ
  • Lập trình
    • ReactJS
    • React Native
    • Angular
    • VueJS
  • Hackintosh
    • Hackintosh
    • Opencore
  • Liên hệ

© 2019 nhat.dev

Xin chào

Sign In with Facebook
OR

Đăng nhập bằng SSO Nhatdev

Quên mật khẩu?

Create New Account!

Fill the forms below to register

All fields are required. Đăng nhập

Lấy lại mật khẩu

Vui lòng nhập tên người dùng hoặc địa chỉ email của bạn để đặt lại mật khẩu của bạn.

Đăng nhập