Cách tìm ra những thẻ HTML lỗi để xử lý
1) Thẻ div rỗng
div:empty {
--error: "Thẻ div trống nên được loại bỏ";
cursor: help;
outline: 1px solid red;
}
2) Thẻ img không có alt
img:not([alt]) {
--error: "Thẻ img bắt buộc phải có thuộc tính alt";
cursor: help;
outline: 1px solid red;
}
3) Thẻ mà không có class block bọc bên ngoài
:not(.menu) > .menu__title {
--error: "element menu__title phải nằm trong block menu";
cursor: help;
outline: 1px solid red;
}
4) Thẻ li mà không có thẻ ul bọc ngoài
:not(ul) > li {
--error: 'Thẻ li nên có ul hoặc ol bọc ngoài';
cursor: help;
outline: 1px solid red;
}
Fontface Ninja
Fontface Ninja là extension cho phép chúng ta biết loại font được sử dụng ở bất kỳ 1 trang web nào đó. Công cụ hiển thị được name, size, line spacing và letter spacing của font.
Wappalyzer
Ghé xem 1 trang web đẹp, có animation mượt mà, người làm Front End rất tò mò liệu rằng trang web này đang sử dụng những công nghệ nào để làm được như vậy. Thì Wappalyzer đây chính là công cụ cho phép chúng ta biết được các công nghệ được sử dụng trong 1 trang web
simple-debug.css
Debug layout với 1 dòng code CSS và 1 cú click, đó là điều mà extension này mang lại Bản thân ta có thể đặt dòng code CSS debug layout này ở trong code của chúng ta và bật khi cần, nhưng đặt vào source code và đóng mở comment code mỗi khi cần sử dụng thì quả thật hơi bất tiện Công cụ này cho phép toggle nhanh chóng add CSS vào để debug layout.
Full Page Screen Capture
Full Page Screen Capture cho phép chụp trang hiện tại từ đầu đến cuối trang, rất hữu dụng thi cần chụp toàn bộ trang đã làm HTML so sánh với bản design xem có chuẩn chưa
Muzli (Totally unbiased)
The freshest links about design and interactive, from around the web. A designer’s must!
Responsive Web Design Tester
Responsive Web Design Tester is a quick and easy way to test your responsive website.
Window Resizer
Resize browser window to emulate various screen resolutions
Page Ruler
Draw a ruler to get pixel dimensions and positioning, and measure elements on any web page.
Dimensions
A tool for designers to measure screen dimensions
ColorZilla
Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies
WhatFont
The easiest way to identify fonts on web pages.
UX Check
Run a heuristic evaluation on your website
Lightshot (screenshot tool)
Simple and convenient screenshot tool. Select an area, edit your screenshot and upload it to the server.
PerfectPixel by WellDoneCode
This extension allows developers to put a semi-transparent image overlay over the top of the developed HTML and perform per pixel comparison between them.
CSS - Shack
CSS-Shack is a web and desktop application, which allows you to create layers styles (just like you would in any other image editing software), and export them into a single CSS file.
TypeWonder
Helps you to test web fonts on any web site on the fly
