Tìm hiểu công cụ Web Developer Tools của firefox

Web Developer Tools bộ công cụ phân tích, kiểm tra website, thực thi bất kỳ các loại mã JavaScript nào, những yêu cầu và tin nhắn qua HTTP… được tích hợp trên thanh công cụ của firefox tiện lợi cho người sử dụng. Là công cụ hữu ích cho các Seoer và các webmaster để chỉnh sửa và xây dựng website trực tuyến, Web Developer Tools cũng là một công cụ hỗ trợ mạnh mẽ cho việc seo web hiệu quả.

 

web-developer-tools
Tìm hiểu Web Developer

 

Web Developer Tools là một add on miễn phí của firefox cung cấp cho người dùng. Bài viết hôm nay sẽ đi hướng dẫn các bạn tìm hiểu về công cụ này để có thể hiểu rõ về nó và sử dụng cách hiệu quả cho viêc quản trị và phát triển web.

Cài đặt Web Developer Tools

Nếu firefox của bạn chưa có công cụ Web Developer Tools thì bạn có thể cài đặt theo hướng dẫn sau :

– Bạn truy cập vào đường link sau để tải add on Web Developer Tools về máy :

https://addons.mozilla.org/vi/firefox/addon/web-developer/

bạn sẽ thấy giao diện như sau và click và nút ” Add to firefox ”

Web developer

Sau khi tải về máy bạn sẽ mở file download cài đặt và khởi động lại trình duyệt.

giao-dien-web-developer

Bạn có thể nhìn thấy giao diện của web developer trên thanh công cụ được bôi đỏ như trên hình ảnh. Bây giờ bạn có thể sử dụng công cụ này để phát triển web rồi.

Hướng dẫn sử dụng addon web developer

Bạn truy cập vào trang muốn tìm hiểu bằng trình duyệt mà bạn vừa mới cài đặt xong web developer và click vào các menu thông tin mà bạn muốn tìm hiểu.

– Disable ( vô hiệu hóa )

 

web-developer-cho-firefox

 

Bạn có thể nhìn thấy một danh sách các phần để vô hiệu hóa chúng phục vụ cho việc chỉnh sửa web của bạn.

– Cookies

Bạn có thể vô hiệu hóa, xóa, thêm cookies và xem thông tin của cookies.

 

cookies

Disable Cookies

Add Cookie…

Delete Domain Cookies

Delete Path Cookies

Delete Session Cookies

View Cookie Information

– CSS

Bạn có thể chỉnh sửa trực tiếp được file CSS trong phần này và xem file CSS của site. Có nhiều tính năng hấp dẫn cho bạn khám phá và tìm hiểu.

CSS

Disable Style

Add User Style Sheet…

Display Style Information

Display Style By Media Type

Edit CSS

Reload Linked Style Sheets

Use Border Box Model

View CSS

– Forms

Các tính năng của mục forms :

Clear From Fields

Clear Radio Buttons

Convert Form Methods

Convert Select Elements To Text Inputs

Convert Text Inputs To Textareas

Display Form Details

Display Passwords

Enable Auto Completion

Enable Form Fields

Expand Select Elements

Make Form Fields Writable

Outline Form Fields Without Labels

Populate Form Fields

Remove Maximum LengthsToggle Checkboxes

View Form Information

– Images :

 

Image

– Information

infomation

  • Hiện/ẩn kích thước từng khối : Nhắp nút Information >> Block Size
  • Hiện/ẩn id hoặc class của các thành phần:: Nhắp nút Information >> Display Id and Class Details
  • Hiện/ẩn địa chỉ của từng hyperlink : Nhắp nút Information >> Display Link Details
  • Hiện/ẩn thông tin của các Flash: Nhắp nút Information >> Display Object Information
  • Hiện/ẩn các màu mà trang web đang dùng : Nhắp nút Information >> View Color Information
  • Xem các HTTP heaser trả về từ server : Nhắp nút Information >> View Response Headers
  • Xem thông tin về trang web hiện hành: Nhắp nút Information >> View Page Information
  • Xem topographic : Nhắp nút Information >> Display Topographic Information
  • Hiện/ẩn thông tin chi tiết của 1 đối tượng: Nhắp nút Information >> Display Element Information.
  • Nhắp chọn 1 đối tượng sẽ thấy các thông tin của đối tượng hiện ra
  • Hiện/ẩn kích thước các hình: nhắp nút Images >> Display Image Demensions
  • Hiện/ẩn kích thước file của các hình: nhắp nút Images >> Display Image File Sizes
  • Hiện/ẩn địa chỉ của các hình: nhắp nút Images >> Display Image Paths
  • Hiện CSS của trang: nhắp nút CSS >> View CSS

– Outline

outline

Outline Block Level Elements

Outline Custom Elements…

Outline Deprecated Elements

Outline External Links

Outline Floated Elements

Outline Frames

Outline Headings

Outline None-Secure Elements

Resize

 

Resize

 

Display Window Size

Display Window Size In Title

Resize Window…

1024×768

Edit Resize Dimensions…

View Responsive Layouts

– Tool

 

tool

Validate CSS

Validate Feed

Validate HTML

Validate Links

Validate Section 508

Validate WAI

Edit Tools…

– View Source

 

view-source

View Frame Source

View Source

Edit View Source With Applications…

Bạn có thể xem được code của một trang và chỉnh sửa.

– option

option

Pin Feature

Active Feature

Options…

Help…

About…

Với công cụ Web Developer Tools bạn có thể thoải mái chỉnh sửa và phát triển web hiệu quả hơn và đơn giản. Hy Vọng bài viết đã giúp các bạn hiểu được hơn về công cụ Web Developer Tools và các tính năng của nó để seo và phát triển web. Chúc các bạn sử dụng thành thạo công cụ này và thành công !

Tìm hiểu công cụ Web Developer Tools của firefox
5 1 vote

bởi admin

car games download