Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.

SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 17++ Năm (Từ 2006 đến Nay)

Chrome Developer Tools: Kỹ năng quan trọng cho Front-End Developer

5/5 - (8 bình chọn)

Chorme Developer Tools (viết tắt là DevTools) là một bộ các công cụ hỗ trợ gỡ lỗi web được tích hợp vào Chrome của Google. DevTools cung cấp cho các lập trình viên truy cập sâu vào trình duyệt và những ứng dụng của chúng. Sử dụng DevTools để theo dõi các vấn đề về bố cục của trang web, thiết lập các JavaScript breakpoints và có cái nhìn tổng quan để tối ưu mã. Trong bài ngày hôm nay chúng ta cùng nhau tìm hiểu về DevTools và các tính năng của nó.

Chrome Developer Tools: Kỹ năng quan trọng cho Front-End Developer feature_image-2

Contents

Mở DevTools

Chúng ta có 3 cách để bật DevTools như sau:

1. Bấm vào dấu 3 chấm góc phải bên trên màn hình chọn More Tools > Developer Tools

Chrome Developer Tools: Kỹ năng quan trọng cho Front-End Developer method1

2. Nhấn chuột phải vào một phần tử trang và chọn Inspect.

Chrome Developer Tools: Kỹ năng quan trọng cho Front-End Developer method2

3. Bấm Command+Option+I trên Mac hoặc Control+Shift+I trên Windows và Linux.

Bật chế độ Device Mode

Bấm vào nút Device Mode để bật hoặc tắt chế độ đa thiết bị.

Chrome Developer Tools: Kỹ năng quan trọng cho Front-End Developer device_mode

Khi chế độ Device Mode được bật, biểu tượng chuyển màu xanh dương.  Chrome Developer Tools: Kỹ năng quan trọng cho Front-End Developer 1-3

Khi nó tắt, biểu tượng chuyển sang màu xám.  Chrome Developer Tools: Kỹ năng quan trọng cho Front-End Developer device_mode-1

Bạn cũng có thể bật chế độ Device Mode bằng phím tắt Command+Shift+M (Mac) hoặc Ctrl+Shift+M (Windows, Linux).

Cửa sổ DevTools

DevTools được tổ chức thành các nhóm với gắn liền các nhiệm vụ cụ thể trong thanh công cụ ở đầu cửa sổ. Mỗi mục trên thanh công cụ và bảng điều khiển tương ứng cho phép chúng ta làm việc với các thông tin trên trang hoặc một ứng dụng cụ thể, bao gồm DOM elements, resources, và sources.

Chrome Developer Tools: Kỹ năng quan trọng cho Front-End Developer devtools_window

Chúng ta có tổng cộng 8 nhóm công cụ chính sẵn có trên DevTools bao gồm:

Elements

Resources

Network

– Sources

Timeline

Profiles

– Audits

Console

Bạn có thể sử dụng phím tắt Ctrl+[Ctrl+] để chuyển đổi giữa các công cụ.

Inspect DOM và styles

Thanh công cụ Elements cho phép chúng ta thấy cấu trúc cây DOM (Document Object Model), kiểm tra và sửa đổi các phần tử trong cấu trúc DOM. Bạn sẽ thường xuyên sử dụng Elements khi bạn cần tìm ra đoạn mã HTML cần kiểm tra trên trang. Ví dụ, bạn muốn xem thuộc tính HTML của một hình ảnh và giá trị của chúng.

Chrome Developer Tools: Kỹ năng quan trọng cho Front-End Developer inspect_element

Xem thêm: Kiểm tra và chỉnh sửa HTML và CSS trên trình duyệt

Làm việc với Console

JavaScript Console cung cấp 2 chức năng chính cho các lập trình viên kiểm tra trang web và ứng dụng.

– Lưu lại thông tin chuẩn đoán lỗi trong quá trình phát triển.

– Thông báo có thể tương tác với tài liệu và DevTools.

Bạn có thể in ra thông tin chuẩn đoán sử dụng các phương thức cung cấp bởi Console API. Ví dụ console.log() hoặc console.profile() .

Bạn có thể đánh giá biểu thức trực tiếp trên console sử dụng các phương thức cung cấp bởi Command Line API.

Chúng bao gồm lệnh $() cho việc lựa chọn phần tử hoặc profile() cho việc khởi động biểu đồ CPU.

Chrome Developer Tools: Kỹ năng quan trọng cho Front-End Developer console

Xem thêm: Làm việc với Console

Gỡ lỗi JavaScript

Khi sự phức tạp của ứng dụng JavaScript tăng lên, các lập trình viên cần những công cụ gỡ lỗi mạnh mẽ để giúp họ tìm ra nguyên nhân của vấn đề và khắc phục chúng hiệu quả. Chrome DevTools hỗ trợ nhiều công cụ hữu ích để gỡ lỗi JavaScript.

Chrome Developer Tools: Kỹ năng quan trọng cho Front-End Developer debug_javascript

Xem thêm: Cách gỡ lỗi JavaScript với DevTools

Nâng cao hiệu suất mạng

Công cụ Network cung cấp thông tin về các tập tin, hình ảnh, … được request và tải xuống qua mạng theo thời gian thực. Xác định và giải quyết những request là một bước thiết yêu trong việc tối ưu hóa trang web của bạn.

Chrome Developer Tools: Kỹ năng quan trọng cho Front-End Developer network_performance

Công cụ Audit có thể phân tích trang khi nó được tải. Sau đó nó cung cấp các khuyến cáo để giảm thời gian tải trang. Để hiểu sâu hơn, mình khuyên bạn nên sử dụng PageSpeed Insights.

Chrome Developer Tools: Kỹ năng quan trọng cho Front-End Developer audit_panel

Cải thiện hiệu suất render

Công cụ TimeLine cung cấp cho bạn cái nhìn tổng quan về thời gian dành cho tải trang và sử dụng ứng dụng web hoặc trang của bạn. Tất cả các sự kiện, từ nạp tài nguyên đến phân tích cú pháp JavaScript, caculating styles.

Chrome Developer Tools: Kỹ năng quan trọng cho Front-End Developer timeline_panel

Xem thêm: Cách cải thiện hiệu suất rendering

Hiệu suất Javascript và CSS

Công cụ Profiles cho thấy tổng quan về thời gian thực và sử dụng bộ nhớ của ứng dụng web hoặc trang web của chúng ta. Những điều này giúp chúng ta hiểu về nguồn tài nguyên đang được sử dụng, và giúp chúng ta tối ưu mã. Công cụ Profiles cung cấp:

CPU profiler cho thấy thời gian thực hiện các chức năng JavaScript.

Heap profiler cho thấy sự tiêu hao bộ nhớ bởi các đối tượng JavaScript và các nút DOM liên quan.

JavaScript cho thấy thực hiện các scripts.

Chrome Developer Tools: Kỹ năng quan trọng cho Front-End Developer profiles_panel

Xem thêm: Cách cải thiện hiệu suất Javascript và CSS

Kiểm tra lưu trữ

Công cụ Resources cho phép chúng ta kiểm tra các tài nguyên được sử dụng khi kiểm tra trang. Nó cho phép chúng ta tương tác với HTML Database, Local Storage, Cookies, AppCache,…

Chrome Developer Tools: Kỹ năng quan trọng cho Front-End Developer resources_panel

Kết luận

Cảm ơn bạn đã theo dõi bài viết! Thông qua bài viết này chúng ta đã cùng nhau khám phá những tính năng tuyệt vời của Chrome Developer Tools. Mình hy vọng với kỹ năng này sẽ giúp bạn tiết kiệm thời gian cũng như tăng hiệu suất công việc.

Tin mới nhất

VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...

Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...

Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...

Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...

Core Web Vitals được đo lường như thế nào? Làm thế nào để bạn biết các bản sửa lỗi đã...

Tin được yêu thích

Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...

Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...

Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...

Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...

Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...

Khách đang xem

  1. SEO 2017 là một quá trình kỹ thuật, phân tích và sáng tạo để cải thiện khả năng hiển thị của...
    22 giây trước
  2. Content marketing là gì? Cụm từ Content Marketing đang trở nên quen thuộc hơn, nhất là những bạn tham gia...
    3 giây trước
  3. Khi đặt quảng cáo người làm hay lạm dụng khi có nhấp chuột nhằm mục đích tăng chi phí quảng...
    2 giây trước
  4. Ắt hẳn chúng ta không thể nào "Khôn lỏi hơn Google" và chúng ta đang chơi "Sân chơi của Google"...
    25 giây trước
  5. Viết một thẻ tiêu đề hiệu quả cho SEO và xây dựng thương hiệu nên là cải tiến trang web...
    16 giây trước
  6. Maggie Cassella là một người Mỹ - Canada nữ diễn viên, diễn viên hài và nhà văn, nổi tiếng nhất...
    1 giây trước
  7. Sự phát triển không ngừng của Internet dẫn đến các vấn đề vi phạm bản quyền nghiêm trọng và DMCA...
    9 giây trước
  8. Trong thời đại công nghệ 4.0, một doanh nghiệp muốn tồn tại bền vững, ít nhiều đều cần sử dụng...
    10 giây trước
  9. Web Server là gì? Trong bài viết này chúng ta sẽ cùng tìm hiểu về máy chủ Web (Web server),...
    22 giây trước
  10. Vào cuối tháng 2 năm 2017 WordPress đã được phát hành 4.7.2 và chính Lâm vờ tờ cũng đã đưa...
    7 giây trước