How to use browser developer tools

[ggeoff]

Hi

I would like to make more use of the browser developer tools. However, there is little documentation that I can find. I am sure that someone must have written a simple guide to error checking using these tools. I suppose there is no market for a book. Foyles bookshop was, and may still be, the largest bookshop in the World and back in the 1960s the English department was the largest but then the Computer department took over. Computer books become obsolete quickly. Unfortunately, that means that help in using programs is decentralised and finding help depends on typing the most likely keywords into Google etc. (and using Daniweb and other forums!) So can anyone point me and others to useful guides to debugging our websites? Thanks for any advice :)

Geoff

[johslind]

If it is just about checking the html (and css), I think the W3O validators must be the obvious choice.
Just google on 'w3o validator'.

[ggeoff]

Hi johslind. No the problem is to investigate why the web page (which may have been validated OK) is not rendering as planned using the Developer tools of Firefox, Goggle Chrome and Internet Explorer. I have found some Youtube videos but they are for users who already use the tools. What is needed is for someone to explain using Youtube (I prefer video) how to get started using the tools.

[ggeoff]

It doesnt help when whilst checking the result of altering a web page the browser doesn't reflect a change. Clear the cache? Did that. I had this issue with both Chrome and Firefox. IE8 and 9 were fine. There were no errors, both CSS and HTML validated ok. the solution was that for some mistaken reason I had been adding a trailing slash to the URL. The result being that an earlier version of the page was being loaded.

[ggeoff]

Another tip: Using the Chrome browser right click on an element of a web page brings up a menu. At the bottom is Inspect element.