Edição e configuração de CSS – Ferramentas para browsers

Com o desenvolvimento web voltado para webstandart e focado em tabless tornou-se imprescindível a utilização de ferramentas de visualização de conteúdo via browser.

Abaixo apresento uma lista de extensões para Firefox que poderão facilitar consideravelmente o trabalho com CSS, especialmente no que tange à identificação e visualização dos elementos da página.

Entre todas, recomendo especificamente o Firebug para iniciar o trabalho e o Web Developer para tarefas mais avançadas, por ser um das extensões mais valiosas e facilitatoras do processo de criação para web.

Firebug – https://addons.mozilla.org/en-US/firefox/addon/1843
You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page

Web Developer – https://addons.mozilla.org/en-US/firefox/addon/60
Adds a menu and a toolbar with various web developer tools.

EditCSS – https://addons.mozilla.org/en-US/firefox/addon/179
Stylesheet modifier in the Sidebar

CSSMate – https://addons.mozilla.org/en-US/firefox/addon/4187
a port of the fantastic EditCSS

View formatted source (format source extension) – https://addons.mozilla.org/en-US/firefox/addon/697
Displays formatted and color-coded source and optional CSS information for each element.

X-Ray – https://addons.mozilla.org/en-US/firefox/addon/1802
See the tags on a page without viewing the sourcecode

CSSViewer – https://addons.mozilla.org/en-US/firefox/addon/2104
A simple CSS property viewer

View Source Choice – https://addons.mozilla.org/en-US/firefox/addon/2070
View Page Source in a variety of contexts

JSView – https://addons.mozilla.org/en-US/firefox/addon/2076
Ability to view the source code of external files. You can now view the embedded css and js as well.

ViewSourceWith – https://addons.mozilla.org/en-US/firefox/addon/394
The main goal consists to view page source with external applications but you can also…
- open page source as DOM document, read faq
- open CSS and JS files present on page

Console² – https://addons.mozilla.org/en-US/firefox/addon/1815
Console² let’s you display errors filtered by type (Errors, Warnings, Messages), language (JavaScript, CSS, XML) and context (Chrome, Content).

View Dependencies – https://addons.mozilla.org/en-US/firefox/addon/2214
Lists all the files which were loaded to show the current page

View Source Chart – https://addons.mozilla.org/en-US/firefox/addon/655
Source Charting… Graphically Displays HTML Tag Boundaries, graphically Defines Tag Nesting Order, Structure and Hierarchy

SourceEditor – https://addons.mozilla.org/en-US/firefox/addon/1760
View and Edit source of HTML element

InspectThis – https://addons.mozilla.org/en-US/firefox/addon/1913
Inspect the current element with the DOM Inspector

Cores
Rainbowpicker – https://addons.mozilla.org/en-US/firefox/addon/1693
Pick any color of the rainbow

FireCal – https://addons.mozilla.org/en-US/firefox/addon/3747
Colour Picker and Converter

ColorZilla – https://addons.mozilla.org/en-US/fir…don/271?id=271
Advanced Eyedropper, ColorPicker, Page Zoomer

Medidas
MeasureIt – https://addons.mozilla.org/en-US/firefox/addon/539
Draw out a ruler to get the pixel width and height of any elements on a webpage

Window Resizer – https://addons.mozilla.org/en-US/firefox/addon/1985
Resize your browser to various standard resolution sizes

Validação:
CSS validator – https://addons.mozilla.org/en-US/firefox/addon/2289
HTML Validator (based on CSE HTML Validator) – https://addons.mozilla.org/en-US/firefox/addon/887
Total Validator – https://addons.mozilla.org/en-US/firefox/addon/2318
Validaty – https://addons.mozilla.org/en-US/firefox/addon/2609
Page validator – https://addons.mozilla.org/en-US/firefox/addon/2250
Offline Page validator – https://addons.mozilla.org/en-US/firefox/addon/2520

Posts co-relacionados

• 22 de julho de 2008 -- Lançamento do layoutsprontos.info (0)
• 17 de julho de 2008 -- Design de ícones: ferramentas de geração de Favicons on-line (0)
• 26 de junho de 2008 -- Lançamento do modelosdesites.info (0)
• 18 de junho de 2008 -- Guia SEO para Designers e Webdesigners (0)
• 2 de maio de 2008 -- Pixel to inch converter design (0)
• 8 de janeiro de 2008 -- O que é Acid 2? (0)
• 7 de janeiro de 2008 -- Estatíticas de acesso ao site da WordPress.com (1)
• 4 de janeiro de 2008 -- 25 sites indispensáveis da Time (4)