Total Followers 132,503
When I was starting out as a web developer, I had to face some struggles when finding solutions to some of my problems. I had to learn and try new things but there weren’t as many tutorials as there are today. The best alternative was to learn and study from the work of others, analyzing their process and work methods.
These days, it seems like a new tutorial appears every minute, but personally I believe that looking at actual implemented solutions is still a powerful way to learn, and you also have many tools and methods at your disposal which can help you see and figure out how your favourite websites were built. Everything you need to know and learn is right in front of you and at your disposal.
The traditional view source code option was not enough for a good code inspection. It became very important for a web developer to have a toolbox that could provide him with a set of possibilities specifically made for code analysis and inspection within a web browser. Those tools are called Developer Tools and are usually installed by default or as an extension/plugin, working directly from the browser itself. With the developer tools you can see all the source code of a webpage as you did before with the traditional View Source Code option, but with way more options and functionality than before. You can inspect, edit, watch live results and much more.
You may be wondering why am I including Chrome Developer Tools and Safari Developer Tools together, well that’s because they belong together. The Developer Tools is part of the Webkit open source project which means Safari and Google Chrome share the same code base, they even share the same layout.
So let’s start with Chrome, my new favourite. Google Chrome’s Developer Tools is very recent compared with others like Firebug (Firefox), but it’s growing fast and getting better and better with each new version.
The same obviously applies to Safari.
“The Google Chrome Developer Tools provide an integrated environment for debugging, optimizing, and understanding a web application, or website, running in Google Chrome. The developer tools are developed partly through the WebKit open source project, where the tools are called Web Inspector.”
“All of Safari’s powerful developer tools are easily accessible from the Develop menu. The Develop menu contains a wealth of tools that you can use for web page manipulation and debugging.”
For a better understanding, you can check the links below.
With Firefox the smart solution for a web developer is definitely Firebug, one of the most popular Firefox extensions out there. Although the Webkit Developer Tools is growing at a really fast pace, Firebug is probably the most complete and mature tool you can have for web development and code analysis.
“Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.”
Firebug‘s interface and work process is extremely similar to Chrome’s Developer Tools (or vice-versa).
This is Opera’s gem for code analysis and inspection. It’s surprisingly powerful and personally I would put it in third place right behind Google Chrome’s Developer Tools. The downside is definitely the aesthetics but its features and cross-device compatibility places Dragonfly among the best.
“A full suite of tools are ready at your disposal. Debug JavaScript, view the DOM, monitor network traffic, preview resources, edit colors and a whole lot more. If you are a developer, or a designer, Opera Dragonfly has the tools to keep you covered.”
For more information, check the link below.
Yes, Internet Explorer has one too. Although the interface looks a bit old and not as good as other solutions since it lacks some functionality, it can be almost as good as the competition.
“The Microsoft Internet Explorer Developer Toolbar provides a variety of tools for quickly creating, understanding, and troubleshooting Web pages.”
You can learn more about it at the link below.
Internet Explorer Developer Toolbar
With real text (not an image of text), the first and easiest way is by using Developer Tools / Firebug, so if you have it just select the text, inspect element and you should immediately see on the right side the font or font-family property which tells you the font that’s being used. Another way to do it is by using an extension/plugin for this purpose. There are probably similar plugins for other browsers like Chrome, but if you’re using Firefox, you have a great add-on called Context Font. With Context Font all you need to do is select the text (again, needs to be real text and not an image), right-click on it and you will immediately get the font and size used.
If the font you’re looking for is being used as an image, you have only one way to do it. One of the many places you can do this is myfonts.com. Upload your font and follow the steps.
Good luck!
The box model represents the visual structure of the elements of a webpage using the corresponding properties like width, height, margin, padding and border, according to the visual formatting model. It’s possible to check the box model of any page and element using Developer Tools or Firebug. In order to do that, you just need to inspect the desired element and select Metrics on the right side of the Developer Tools panel. With Firebug, you need to select Layout (not Metrics).
This one is a popular trick which is achieved by using the Developer Tools console. So let’s say you would like to copy this article’s text without the need of having to select all the content with your cursor (particularly useful on very long pages with too much text). To do that, inspect any element on this article page and look for the text container’s name from which you would like to copy the text (which in this case is called articlesContainer), now go to the console option and write the following command: copy ( articlesContainer.innerText ). Now paste the text anywhere you want and you are done! You’ve just copied the text inside our articlesContainer which corresponds to our main article text.
MIN is a bookmarklet that will strip any decoration from a site. All color, borders and backgrounds are removed instantly, helping you identify the successful and unsuccessful uses of typography and layout.
Design is a suite of web-design and development assistive tools which can be utilized on any web-page. Encompassing utilities for grid layout, measurement and alignment, Design is a uniquely powerful JavaScript bookmarklet.
When invoked, a div element will appear in the top left corner of your browser window with a list of all the favelets included. Simply click the link you want to invoke the favelet. An “info” icon is available to take you to the favelets information page on slayeroffice. Included in the suite: Color List, Document Tree Chart*, HTML Attribute Viewer, HTTP Header Viewer, Hidden Field, Modifier, JavaScript Object Tree*, MODIv2, Mouseover DOM, Inspector, Object Dimensions, Page Info, Remove Children, Resize Fonts, Ruler**, Show Source, Style Sheet Tweak*, Style Sheet Viewer*.
Quick markup validations of any web document.
Get The Only Freelancer crash course you will ever need to read!
I am a Portuguese UI/UX designer, visual designer and writer. I have a Bachelor's Degree in Information Technology and Multimedia and I'm addicted to web technologies and design. Feel free to check my work on Behance or Dribbble. You can also follow me on Twitter.
Friday, September 9th, 2011 02:52
i prefer web developer over firebug. great list!
thanks for the share
Wednesday, August 17th, 2011 15:51
Thumbs up for Min, never heard about it!
And thanks for the list Ruben.
Monday, August 15th, 2011 17:55
I love FireBug for FireFox! One of the best :)
Monday, August 15th, 2011 17:09
Thank you for the reading guys :)
Min is very coold indeed!
I’ve always used Firebug but I recently switched to Chrome and I believe I changed for good.
Opera Dragonfly is also amazing.. too bad people don’t use Opera that much.
Monday, August 15th, 2011 01:41
I use a combination of Firebug and Chrome’s inspector. I find that firebug is much easier to use from an everyday usability perspective, but firefox runs like a dog on Mac so I have been putting up with Chrome’s inspector tool lately.
I didn’t know about that Min bookmarklet, looks cool will check it out!
Saturday, August 13th, 2011 13:28
I have to agree with a previous comment that Firebug has been the single most important tool in my development toolbox for a long time. Infact it’s the only reason that has kept me using Firefox since the overall browser performance has gone massively downhill since V3. I’ve tried some of the other debug tools you mention in other browsers but found it hard to get used to them.
Friday, August 12th, 2011 09:58
I’ve just made the switch over to Chrome using all of it’s dev tools. Looking forward to it and I hope it impresses cause Firefox has really gone down in my estimations recently. Thanks for the post chaps!
Thursday, August 11th, 2011 18:09
Seriously, Firebug is possibly the SINGLE most important tool that we use to develop and troubleshoot HTML, CSS, and Javascript in websites we develop. It has crossed my mind MANY times that my job would be significantly tougher without it! Thanks for the good roundup – I’ll have to try a few others out.
Thursday, August 11th, 2011 17:21
wooow, cognate your things about Web growth Tools, Elements and Techniques
Thursday, August 11th, 2011 15:01
Doesn’t known “Min” yet, but looks very useful.
As inbrowser grid I’m using Grid960 Bookmarklet from http://www.badlydrawntoy.com/
Thanks for another great post.. :)
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
gashone
Thursday, August 11th, 2011 15:01
Doesn’t known “Min” yet, but looks very useful.
As inbrowser grid I’m using Grid960 Bookmarklet from http://www.badlydrawntoy.com/
Thanks for another great post.. :)
Gavin Humphreys
Friday, August 12th, 2011 09:58
I’ve just made the switch over to Chrome using all of it’s dev tools. Looking forward to it and I hope it impresses cause Firefox has really gone down in my estimations recently. Thanks for the post chaps!
Chris
Thursday, August 11th, 2011 18:09
Seriously, Firebug is possibly the SINGLE most important tool that we use to develop and troubleshoot HTML, CSS, and Javascript in websites we develop. It has crossed my mind MANY times that my job would be significantly tougher without it! Thanks for the good roundup – I’ll have to try a few others out.
Neal
Thursday, August 11th, 2011 17:21
wooow, cognate your things about Web growth Tools, Elements and Techniques
Sem
Saturday, August 13th, 2011 13:28
I have to agree with a previous comment that Firebug has been the single most important tool in my development toolbox for a long time. Infact it’s the only reason that has kept me using Firefox since the overall browser performance has gone massively downhill since V3. I’ve tried some of the other debug tools you mention in other browsers but found it hard to get used to them.
Josh Kohlbach
Monday, August 15th, 2011 01:41
I use a combination of Firebug and Chrome’s inspector. I find that firebug is much easier to use from an everyday usability perspective, but firefox runs like a dog on Mac so I have been putting up with Chrome’s inspector tool lately.
I didn’t know about that Min bookmarklet, looks cool will check it out!
sadesigns
Friday, September 9th, 2011 02:52
i prefer web developer over firebug. great list!
thanks for the share
Aaron
Wednesday, August 17th, 2011 15:51
Thumbs up for Min, never heard about it!
And thanks for the list Ruben.
Andrew
Monday, August 15th, 2011 17:55
I love FireBug for FireFox! One of the best :)
Ruben D'Oliveira
Monday, August 15th, 2011 17:09
Thank you for the reading guys :)
Min is very coold indeed!
I’ve always used Firebug but I recently switched to Chrome and I believe I changed for good.
Opera Dragonfly is also amazing.. too bad people don’t use Opera that much.