• Wednesday , 23 May 2018

Debugging JavaScript in chrome

Code Canyon

chrome js debugger
js debugging chrome
debugging js using chrome
debugging javascript with google chrome

To debug JavaScript in Google chrome use developer tools.

To launch Developer Tools in Google chrome
1. Click on Customise and Control Google chrome button on the top right corner of the browser window
2. From the More tools option, select Developer tools

Alternatively you can also use the keyboard shortcut F12.

You can find JavaScript errors if any in the developer tools.

Use the Console tab in the developer tools to find the source file of the JavaScript that caused the error. This will also tell you the line number of the error.

Click on the JavaScript file name in the Console tab. This will open the JavaScript file in the Sources tab and underlines the line that caused the error with a red squiggly.

Setting breakpoints in Google Chrome : To set a breakpoint, simply click on the grey margin where you see line numbers in the Sources tab.

A blue tag appears indicating that a breakpoint is set. At this point if you reload the page, the breakpoint should be hit and you should be able to step thru the code using the following keyboard shortcuts.

Step over – F10
Step into – F11
Step out – Shift + F11
Continue – F8

You can also use the respective buttons in the Developer tools to step thru the code instead of using the keyboard shortcuts.

To remove a breakpoint simply click on the grey margin again.

Setting a conditional breakpoint : To set a conditional breakpoint, right click on the grey margin and select “Add conditional breakpoint. You can then specify the condition that should be true for the breakpoint to be hit.

Call stack panel : The Call Stack panel displays the complete execution path.

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

Original source

3d Ocean

Related Posts


  1. Jyotsna Singh
    July 9, 2017 at 06:01

    thank you so much for this video. Its the shortest and simplest tutorial I have come across which explains how to use chrome browser for javascript debugging.

  2. Boi-Hue La
    July 9, 2017 at 06:01

    Thanks a lot for all your helpful tutorial videos

  3. 李会平
    July 9, 2017 at 06:01

    Amazing job, so clear to start debugging job !! thx~~

  4. Lucas Bustamante
    July 9, 2017 at 06:01

    "Developertools" lol

  5. Harinder Bedi
    July 9, 2017 at 06:01

    Good explanation.

  6. joga gaja
    July 9, 2017 at 06:01

    Really good and simple.Thanks.

  7. Sin Censura
    July 9, 2017 at 06:01

    Great tutorial. A question: why doesn´t work if I include the javascript code in the same pag as the html?

    July 9, 2017 at 06:01

    You Rock…….

    July 9, 2017 at 06:01

    what about php variable ? can we inspect php variables using chrome tools

  10. Loku Bell
    July 9, 2017 at 06:01

    Thank you so much Sir for sharing this wonderful series of Java script with us. Only a person like you can make this series so easy to learn. Thanks.

  11. vladanng
    July 9, 2017 at 06:01

    I watched all yout 75 videos on JS. Some even 2x/3x times to learn better, and remeber. Definately the BEST tutorials on Js. I guess for other languages aswell! Cheers!!!

  12. mookjais
    July 9, 2017 at 06:01

    Thanks for this whole series.  I watched all of them & am grateful.

  13. Sergio
    July 9, 2017 at 06:01

    So if you have a variable that needs an input, it will give you an error if you debug before running that input right?

  14. Shandy Sulen
    July 9, 2017 at 06:01

    Additionally, you can right-click and choose 'Inspect Element' to enter the Developer Tools Menu

  15. Deepak Sahu
    July 9, 2017 at 06:01

    Finally I finished all 75 videos of JavaScript very nice journey and tutorials with good explanation example .thanks Venkat Sir

  16. G Dreams
    July 9, 2017 at 06:01


  17. bhaveshkumar guntuka
    July 9, 2017 at 06:01

    Thanks Venkat. you are good Code Exeplation.
    Please also provide (
    JavaScript Design Patterns

  18. Life is Love
    July 9, 2017 at 06:01

    what a video…….superb…..so many videos on youtube but in yours, technic is so good, So thank you very much for help us sir.
    but sir I LIKE MORE YOUR ENGLISH PRONUNCIATION THAN JS…. too good, i will try like you.

  19. Rahul Kharya
    July 9, 2017 at 06:01

    Completed all 75 tutorials. All I can say is:

    if (kudvenkat_tutorials) {

    document.write("I Know JavaScript");

    } else {

    document.write("Still wandering in search of good resources!!");

    Thank you so much for creating these tutorials. Wouldn't have asked for more 🙂

  20. ConaxHateGG
    July 9, 2017 at 06:01

    Woohoo!!! Finally finished watching the whole series of 75 videos. Thank you sir.

  21. Ankur Tomar
    July 9, 2017 at 06:01

    Thanks bro!!! it really helped !!

  22. Vinod Pasi
    July 9, 2017 at 06:01

    Can we directly modify the javascript in debuggin mode?

  23. Mark N
    July 9, 2017 at 06:01

    Nice and clear, with simple JS examples. Thank you.

  24. Jake C
    July 9, 2017 at 06:01

    Thanks! Very helpful!

  25. bra .Scene
    July 9, 2017 at 06:01

    Thank you very much, your tutorials are so interesting, clear and very useful. Now I'm gonna start with jQuery tutorials 🙂

  26. ruthy Ayele
    July 9, 2017 at 06:01

    awesome video as usual. thanks again Sir

  27. Gary Marshall
    July 9, 2017 at 06:01

    Great job. Well spoken English. Thank you.

  28. james pruett
    July 9, 2017 at 06:01

    nice vid. How to debug Chrome-Extension? It is javascript, but doesn't seem to show up as your did.. Thanks!

Leave A Comment

You must be logged in to post a comment.