Web Developer extension

Web Developer extension

1. Giới thiệu

Web developer là một tiện ích bổ sung cho trình duyệt được tạo ra nhằm phục vụ công việc của các lập trình viên trang web. Tuy nhiên, do được tích hợp nhiều tính năng mạnh mẽ mà SEOer có thể tận dụng tốt trong việc tối ưu on-page. Trong khuôn khổ bài viết này, chúng ta sẽ tập trung vào công dụng của web developer cho SEOer.

2. Cách thêm vào Chrome

Bạn có thể thêm extention này vào trình duyệt bằng cách rất đơn giản như sau

  1. Tìm kiếm extension này trên google search  hoặc vào trực tiếp trang chủ cung cấp extension này dành cho các trình duyệt tại đây http://chrispederick.com/work/web-developer/
  2. Click vào kết quả tìm kiếm đầu tiên sẽ hiển thị ra extension chúng ta cần. tại đây chúng ta chỉ cần click vào nút màu xanh ADD TO CHROME
  3. Sau khi cài đặt xong thì ở góc trên bên phải có xuất hiện một icon nhỏ giống hình bánh răng như dưới đây:

và trong list extention của Chrome sẽ xuất hiện extension này

3. Các chức năng

Nhìn tổng quát thì extension này có các menu chức năng chính như sau:

Tên chức năngMenu các chức năng con
Disable
Cookies
CSS
Forms
Images
Infomation
Miscellaneous
Outline
Resize
Tools
Options

4. Cách sử dụng

4.1 Images

Một số tính năng và công dụng của nó đối vơi SEOer nhằm tối ưu hình ảnh như sau:

  • Disable Images – Hiển thị image
  • Display Alt Attributes – Hiển trị thẻ alt ảnh
  • Display Image Dimensions – Hiển thị kích thước hình ảnh
  • Display Image Paths – Hiển thị đường dẫn thư mục hình ảnh
  • Find Broken Images – Hiển thị danh sách hình ảnh bị lỗi
  • Outline Images With Oversized Dimensions – Phác thảo hình ảnh với kích thước quá khổ
  • Outline Images Without Alt Attributes – Phác thảo hình ảnh không có thuộc tính thay thế
  • Outline Images Without Dimensions – Phác thảo hình ảnh không có kích thước
  • Reload Images – Tải lại ảnh
  • Replace Images With Alt Attributes – Thay thế hình ảnh bằng các thuộc tính thay thế

Các tính năng này giúp SEOer dễ dàng kiểm tra các hình ảnh trên website một cách nhanh chóng, trực quan mà không cần phải kiểm tra source code.

4.2 Kiểm tra toàn bộ CSS Validator

Để kiểm tra toàn bộ CSS Validator thì ta chỉ việc chọn menu Tools -> Validate CSS thì chúng ta sẽ được render ra 1 trang chứa các thông tin CSS của trang chúng ta.

Kết quả trên cho ta thấy trên trang 24h.com.vn có 2 lỗi (errors) CSS và 112 cảnh báo (warnings).

Một ví dụ khác là chúng ta thử chọn menu Tools -> Validate Local CSS thì sẽ thấy có 19 errors và 141 warnings

4.3 Miscellaneous

Trong menu chức năng này cung cấp đầy đủ cho chúng ta các công cụ như pick color, ruler, xóa cache, xóa lịch sử duyệt web…

  • Ruler Chọn Miscellaneous -> Display Ruler sẽ có một hình chữ nhật để đo các thành phần trên màn hình theo đơn vị pixcel 

4.4 Cookies

Với menu này cung cấp cho developer đầy đủ các chức năng thêm, sửa xóa cookies. Rất hữu ích trong các trường hợp muốn test các chức năng của website liên quan đến cookies.

  • Ví dụ add cookies ta chọn Cookies -> Add Cookie...
  • Xem tất cả các cookies trên trang hiện tại ta chọn Cookies -> View Cookie Infomation

Và còn rất nhiều chức năng khác để bạn khám phá công dụng của extension này. Các bạn hãy add thêm vào trình duyệt của mình để hỗ trợ thêm cho công việc debug nhé!

4.5 Outline

Outline External Links – Chức năng này sẽ giúp làm nổi bật các link external của 1 trang bất kỳ mà bạn muốn kiểm tra. Một trong những tính năng khá tốt trong việc kiểm tra các external link của trang web nhằm xác định và điều chỉnh cho phù hợp như đổi vị trí, đổi external link,…

5. Lời kết

Extension này cung cấp khá nhiều chức năng hữu ích cho những web developer, rất mong bài viết này có thể giúp ích bạn trong quá trình làm web Hy vọng nhận được nhiều comment của các bạn.

0/5 (0 Reviews)
Web Developer extension