Những thủ thuật “ Bá đạo ” mà bạn có thể làm với Chrome Developer Tools

Văn Anh Đào

Những thủ thuật “ Bá đạo ” mà bạn có thể làm với Chrome Developer Tools

Như các bạn đã biết Chrome developer tools là một công cụ được tích hợp sẵn trong trình duyệt Google Chrome ,nó cung cấp quyền truy cập vào nội bộ của trình duyệt và ứng dụng web của họ . Bài viết này mình sẽ giới thiệu khái quát và một số thủ thuật khi sử dụng Devtools .
Phần 1 : Giới thiệu khai quát về Chrome Developer tools.
Đầu tiên để mở Chrome Developer tools ta dùng tổ hợp phím Ctrl + Shift+I với Mac chúng ta dùng Ctrl +Option +I hoặc nhấp chuột phải và chọn Inspect.
Một số tab trong Chrome Developer tools:

Elements
Tab này hiển thị HTML của các Element của trang Web. Chúng ta có thể sửa trực tiếp HTML , CSS và có thể xem kết quả trực tiếp .Ngoài ra khi chúng ta thiết kế trang web responsive chúng ta có thể click icon mobile để xem website của bạn trên nhiều thiết bị khác nhau .
Console

Tab này sẽ hiển thị các lỗi về Javascript . Bạn có thể viết code JS và chạy trực tiếp trong tab này , đây là một tính năng rất hay để có thể test từng code JS riêng lẻ .
3. Sources
Tab này hiển thị sources code của trang web, bạn có thể debug code js bằng các breakpoint hoặc nếu code quá dài để đỡ tốn công thì có thể thêm dòng debugger ở nơi bạn muốn kiểm tra.
4. Network

Tab này chúng ta có thể xem toàn bộ mà trình duyệt tải được từ Server (HTML, CSS , ảnh , JS, …, chúng ta có thể xem thời gian tải của trang,hoặc có thể xem trang tốc độ tải của trang web của bạn với từng tình trạng khác nhau, từ đó optimize và tăng tốc độ , cải thiện trải nghiệm người dùng.

Performance
Các bạn có thể đanh giá, chạy code , xem code chạy nhanh hay chậm , từ đó chúng ta tối ưu lại trang web chạy nhanh hơn.
Memory
Trong tab này chúng ta có thể xem dung lượng bộ nhớ mà website của bạn hiện đang sử dụng , xác định DOM tách dời ,…
Application
Chứa Local browser (Thông tin mà trình duyệt được lưu),Cookie, chúng ta có thể xóa hoặc sửa cookie mà trình duyệt lưu ,
Security
Kiểm tra độ an toàn , bảo mật của trang web .
Audits
Chúng ta có thẻ xem đanh giá trang web theo tiêu chuẩn của Chrome.

Phần 2 : Một số thủ thuật với Chrome Devtools
• 1 Chỉnh sửa bất kỳ đoạn text nào của trang web .

Trong cửa sổ tab Console ta nhập : document.designMode='on'
• 2 Mở nhanh file JS
Sau khi mở devtools nhấn tổ hợp phim Ctrl +P , những file cần tìm sẽ hiện ra đầy đủ , nhấn Enter để mở file.
• 3 Select các Element trong HTML

Để chọn 1 element trong HTML, ta thường hay sử dụng jQuery. Cửa sổ Console của Developer Tool cũng có 1 bộ api để ta select các element.

$(): Viết tắt cho document.querySelector(). bạn có thể dùng cú pháp css để select element tương tự jquery. Kết quả trả về là element đầu tiên tìm được.
$$(): Viết tắt cho document.querySelectorAll(). Tương tự như $(), nhưng trả về toàn bộ các element.
$0-$4: Các element đã được select gần đây nhất. $0 là element cuối cùng được select.

• 4 Biến code xấu thanh code đẹp
Khi chúng ta code xấu , code ẩu , sử dụng thư viện với code đã minify, rất khó đọc , debug . Chúng ta chỉ cần nhấp vào file icon {} để format lại code .
• 5 Lưu trữ console.log , không mất log khi refresh lại trang
Để nội dung cửa sổ console vẫn giữ nguyên khi refresh lại trang ta chỉ cần tick vào ô “ Preserve log” tại ô cài đặt .

• 6 Lấy màu của các Element khác trên trang web
Trong tab Element của devtools , click vào css liên quan đến màu sắc (color, backgroud-color , một bảng màu sẽ hiện ra, cùng với một cây bút lấy màu cho phép bạn chọn màu từ element khác.

• 7 Kéo thả Element
alt text
• 8 Tìm kiếm trong source code

Để tim kiếm trong source code nhấn tổ hợp phim : Ctrl+Shitf+F

namndwebdev

@Văn-Anh-Đào Bài viết hay quá. Rất hữu ích