Being frustrated with debugging your web page?
Do you know, to some degree, your web browser can work as powerful as a sophisticated IDEA such as Eclipse? This blog will introduce the magic Developer Tools of popular browsers. Let’s take Google Chrome for example.
1. Push F12 button to enter Developer Tools console. (or Fn+F12 for some brands)
2. Under Elements tag, you can identify each element of your Html file. Click any tag that you are interested, the related elements will be highlighted in your web page and all related attributes will be shown on the right side of the console.
3. To quick diagnose your web page, there will be a red spot on the upper right side with number of errors presented. If the red spot shows up while opening the console, go to Console tag to see the description of the errors and take action accordingly.
4. Under Console tag, you can test your web page by either typing JavaScript code here or using console related functions in your web page, such as console.log().
5. Also, as Eclipse IDE, you can adding, deleting breakpoints under Sources tag. On the left side, select the Js file that you want to debug, add/delete breakpoints, and on the right side of the console, select actions you want to perform.
Certainly, Developer Tools offer other attractive functions for experienced web developers. The above presents the basic ones used most frequently. For further information, refer to these resources is advised.
https://developer.chrome.com/devtools
https://developer.mozilla.org/en-US/docs/Tools/GCLI
http://msdn.microsoft.com/en-us/library/dd565628%28v=vs.85%29.aspx
Editor: Mengru Li
