Feb 7, 2012

Accurate and easy web design web developer plugin for firefox

Filled under: ,

Each web design work to eliminate the problems you could encounter and create a seamless web pages very useful tool for the web developer toolbar.


Without further ado let's look at the properties immediately use most Web Developer Toolbar:

Size / Resize
The screen resolution control: the desired screen resolution Resize menu on web design, you can control. Define the new dimensions.

Pictures / Images

Finding the images shown in
"Images -> upload to failed show pictures (Images -> Find Broken Images)" lists the image files can not be found on the page with the option open.

Change images with sub-features
Not found for SEO as well as pictures want to appear on the bottom displays the information defined in the text.

Reporting on a page image files
At which the image files that Tasarımınızdaki, image dimensions, file length and sub-feature reports.

Information (Information)
"Information (Information)" menu on your web page with very useful to many options. Featured those testing positive, including:

Div learn the dimensions of the blocks
Blocks are designed by using div tags is an important issue how it looks on your page, the browser is to examine how it compiles. For this process can extract your mistakes, "Info-> view the block size (information -> Display block)" option you are using.

Link to review the details of
To check the links on your page "Information-> View Connection details (information -> Display link details) use". In addition, "Info -> Show the connection information (information -> view link information)" all links on one page summary of the option allows you to control more quickly and easily.

CSS class (class), and id show the values ​​of
Css class on your page and check IDs, "Info -> View ID and Class details (information -> display id & class details)" option, you can do with.

Learning of the document size
Late if the larger the size of your Web page will be installed. Late opening to visitors in addition to unnecessary traffic in the nerve does not necessarily need to be checked. "Info -> Show the size of the document (Information -> view the document size)" option is preparing a report on this issue.

No error in css / css
Knowledge of an element on the page to learn css


"No error in css -> Show the style information (CSS -> view style information)" option, any element on the page with the css definitions which you can easily see that it has. If you expect an error in a color that Tanımlarınızda the H1 tag, for example, an easy method to investigate.

Reporting information on all the css of the page


Your page does not appear to be due to a faulty connection, sometimes a css file. If you design a software application that uses dynamic content such as wordpress specified css files, upload your own. Css files to see what the page is connected "no css error -> Go CSS (css -> view css) use".

Css file editing
One of the css file, edit the page while watching my favorite option. "No-fault CSS> Edit CSS (css -> edit css)" feature that lets you use css file with the option on the page will look at changes you make to allow time to win. Floppy disk can store button.

Cookie management
If you must work with a programming language like PHP or ASP.NET cookie (cookie) are using the. Delete cookies, cookies with options such as to override the menu is very useful.

Tools / Tools
Web page standards compliance testing


I would recommend that you use the Tools menu, especially the three options presented. "Check CSS (Validate CSS), HTML Audit (Validate HTML)" and "Check Links (Validate Link)" options. Preparation of the HTML / CSS design, W3C standards, the need to test your browser correctly encoded and displayed correctly in search engines like google, very important for accurate indexing. In addition, working broken links (URL) addresses the same angle detection is required. In fact, these three together as a shortcut for the operation using the W3C validator service useful to have. To make these checks need to be installed on a web page for a specific address.

Control of local pages


Should be installed on a previous option belirmiştim web page on your website. In this option, you can check file to your computer Local CSSyi Audit (tools -> validate local css) and check for local HTML (validate local html) options available.

Useful tools
Ruler (Rules), taking measurements with the screen


"Miscellaneous-> Ruler View (Miscellaneous -> Display Ruler)" option can measure your page. Especially when measuring the size of a div block-fitting or part of an image is useful.
Result
Web developer toolbar into firefox with a unique web design tool. Helps you organize your web site design easy and practical manner. I believe it is an indispensable tool for every webmaster.

Firefox Web Developer add plug-in:
Firefox menu "Tools -> Extensions (Tools -> Add-ons)" option "Make plugin (get addons)" tab, or by searching through the Web as a developer http://chrispederick.com/work/web-developer/ can add at .

0 comments:

Post a Comment