Hello! Time for the next debugging mini-lesson. Today I want to give you an additional information about debugging web-app. If you have some JavaScript (or other scripts) on your page it is very simple to debug it in familiar way.
All you need for this lesson - Chrome browser and some working project with couple of JavaScript lines inside.
I am using my pet-project to make some clear images for you.
First, click on 'F12' to load the debug menu in your browser. We have a lot of useful staff here. I think that you know much about them.
We need to open a 'Sources' block. Here we can see all our scripts from the current page. Let's click on the row numbers to add the breakpoints in those positions.
Next we must invoke our script. In my case I can do this by clicking 'Search' button.
After this the program will stop on the first breakpoint. On the right side we have some useful information: values of variables on this moment and much more.
Click 'next'(pointer) to go to the next breakpoint.
Here (in my case) we can see the first result of iteration through the list of existing users in my DB. We have all fields from the first object that we've got during iteration.
Now, press 'next' again. The first result will appear on the page and we will sent back to the breakpoint where we process iteration.
This is all about simple script debugging in browser. I hope that this article will help someone to fix his bugs in short terms.
Thanks for reading. Bye!
All you need for this lesson - Chrome browser and some working project with couple of JavaScript lines inside.
I am using my pet-project to make some clear images for you.
First, click on 'F12' to load the debug menu in your browser. We have a lot of useful staff here. I think that you know much about them.
We need to open a 'Sources' block. Here we can see all our scripts from the current page. Let's click on the row numbers to add the breakpoints in those positions.
Next we must invoke our script. In my case I can do this by clicking 'Search' button.
After this the program will stop on the first breakpoint. On the right side we have some useful information: values of variables on this moment and much more.
Click 'next'(pointer) to go to the next breakpoint.
Here (in my case) we can see the first result of iteration through the list of existing users in my DB. We have all fields from the first object that we've got during iteration.
Now, press 'next' again. The first result will appear on the page and we will sent back to the breakpoint where we process iteration.
This is all about simple script debugging in browser. I hope that this article will help someone to fix his bugs in short terms.
Thanks for reading. Bye!
Thanks for imges: http://freedesignfile.com
License: Creative Commons (Attribution 3.0)
License: Creative Commons (Attribution 3.0)
No comments:
Post a Comment