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)
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ó.
Contents
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
2. Nhấn chuột phải vào một phần tử trang và chọn Inspect.
3. Bấm Command+Option+I trên Mac hoặc Control+Shift+I trên Windows và Linux.
Bấm vào nút Device Mode để bật hoặc tắt chế độ đa thiết bị.
Khi chế độ Device Mode được bật, biểu tượng chuyển màu xanh dương.
Khi nó tắt, biểu tượng chuyển sang màu xám.
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).
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.
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
– Network
– Sources
– Timeline
– Profiles
– Audits
– Console
Bạn có thể sử dụng phím tắt Ctrl+[ và Ctrl+] để chuyển đổi giữa các công cụ.
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.
Xem thêm: Kiểm tra và chỉnh sửa HTML và CSS trên trình duyệt
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.
Xem thêm: Làm việc với Console
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.
Xem thêm: Cách gỡ lỗi JavaScript với DevTools
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.
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.
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.
Xem thêm: Cách cải thiện hiệu suất rendering
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.
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,…
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.
Dù bạn dùng phiên bản WordPress với lưu lượng truy cập cao hay một blog nhỏ trên máy chủ chia...
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...
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...