The experience of Web development F12 developer Tools/web Debugging

Quote: The entire Web development industry today even said that the entire software development industry, has been quite mature, basically has rarely found no previous done things, or in other words, you want to achieve the function, you can always find the answer in a certain place, the key is that you have this time and energy to search! So that most of the development, in fact, is a process of looking for information, a copy and paste process, which is indeed a sad phenomenon. However, a different perspective, in fact, is also very good, now we all have to stress an efficiency problem, as long as the function can be realized, do not let him copy and paste copied. The point is, you have to be able to copy, paste, copying Ah! Did someone give you all the accessories and you can assemble the car? Did someone give you a nice car and you're going to make a retrofit? However, the key is to see how many pounds you have.

I remember that I once had a senior OPS colleague say a word to me, called: the so-called development is just a little bit of debugging code skills. Although I personally did not look at operations's work very much, but, I have to say, I very much agree with his words. Because nowadays the internet is rampant today, there are too many references, you can achieve all you want to achieve. But it is because there are too many references, so that we do not know what to choose, which is right, which is wrong? Who said no, there is no choice is a helpless, too many choices will always make people impetuous!

See the title of this article, is to talk about Web debugging, but I estimate the length of nonsense, because, haha, my TM is a like to come to the virtual of such a person! What I call imaginary is the theoretical level of something rather than the actual combat level. However, I always believe that theory is the basis of practice, practice will deepen the understanding of true theory! To be a real developer, I think at least you need to know how the computer works. Basic knowledge is really essential, such as: Computer Principles, compilation, microcontroller, C,VB,VC, data structure, classic algorithm! These will undoubtedly deepen your understanding of the theory!

Well, there's too much crap. As a web Developer, Web Debugging tools are naturally essential. So, let's talk about some of the features of Chrome,firefox,ie's Web debugging (though there are countless browsers on the market, but the kernel is basically one of those three ), and what are the techniques?

One, Firefox plugin Firebug, Firefox debugging tool "Beginner must"

Why the first mention of Firefox? Because Ah, this thing is really too convenient, just start contact development, at all do not know debugging, just by feeling to do things. Later saw someone in the use of Firefox Firebug, a bit fell in love, for the following reasons. Advantages: 1 Chinese; 2 intuitive; 3 Positioning super fast! Cons: 1 plug-ins need to be re-downloaded each time, 2 to re-enable each time you can use a variety of debugging features.

Below we first look at a few main function module, a little later to parse!

. Control Desk

.. Script debugging

... Network send and Receive Status View

The main function of the inside is, 1. The console, can be intuitive to see some of the basic situation of the page, such as the error message, as well as some Ajax requests, very easy to see the access parameters, and so on, basically through the debugging here, you may save 30%~40% error; 2. Script page, if the JS script is more complex, that page JS single-step debugging and other functions are necessary, Firebug has a very good search function @ Multi-file search, that is, if you can say its individual keywords, he can help you find specific in which script page which line. 3. Network function, used to view the individual pages of the specific request is very convenient to locate which node is the problem is necessary, of course, a little more understanding of the HTTP protocol for this piece of understanding is still very good.

Second, Google Chrome's F12 comes with a console "level advanced"

Google, as one of the standards makers (as it is), is an absolute supporter of the standard, so for many of the standard attributes, Chrome has a good show. But one thing is very confusing, that is the whole page is English, the description is not too consistent with our Chinese habits, so suitable for advanced but not suitable for beginners, for the English level slightly better students (of course, see habits are the same). Advantages: 1 Browser, 2 The official standard is suitable for writing standard grammar, 3 full-featured; 4 console debugging is easy to use almost as a simple help document! Cons: As mentioned earlier!

Let's look at some of the following and explain it later!

. Page element View

.. Network Condition View

... Resource Usage (script debugging)

.... The console runs temporarily

As a developer with a little bit of experience, I think Chrome's debugging is a must, although there are a lot of messy English, but we can still overcome it, and he has a very complete function. The basic function and the firebug of Firefox are similar, the difference is just a different way of presentation, then I say a few special or not mentioned in the previous point. 1. It is convenient to dynamically edit HTML elements, so as to avoid repeated code debugging work, in the same way as CSS style writing. Write HTML page I have an immature idea: in fact I will not write what page, I just know a few tags html,div,span and a few CSS name display,position,font-size, and then I kept in the browser console guessing various ideas, Then the complex effect came out; 2. As a script debugging, I am not accustomed to chrome debugging, do not support multi-file search, which is not a good thing to include a lot of files, but you can put all the resources open, then search can give you positioning; 3. Adapt to his web viewing tool (click on the link after the specific information on the right to show, the timeline is properly hidden according to the situation); 4. Dolly uses the console to write a few attempts, for a global variable that has already been loaded, you can use it directly in the console, such as to see the height of an element, $ (' #ele '). Height (); Here the ' $ ' is the jquery variable that has already been loaded in the document. 5. Some other optimization tools can try to use! (Haha, I just see it doesn't work)

Third, IE tools HttpWatch "see a person likes"

In fact, I basically do not use IE to debug the code, but as a well-known browser, and the famous HttpWatch is still necessary to understand. The pros and cons of self-judgment, I would like to say two words. 1. Powerful, can export the access log, in another place for static analysis; 2. Grab the bag, in fact he is doing this! 3. IE's F12 is almost the same as the others, simply engage in the line, anyway I just use to debug compatibility issues!

工欲善其事, its prerequisite! Only if you have a good handy debugging tool to help you, you can do your work faster. Of course, you'd better have some basic knowledge, which will help you to find the direction of the problem! So, debug your code, debug yourself.

Note: This article mainly talk about Web console debugging, it looks like all front-end work, but in fact, is often closely connected with the back end! A word, go to you will know!

The experience of Web development F12 developer Tools/web Debugging