@manhnguyenv

Welcome to my blog!

Front End Developer Tools - Front End Extensions

March 19, 2018 22:20

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 spacingletter 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

 

Categories