Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 31 down vote favorite
3

When I open Developer Tools in Google Chrome, I see all kinds of features like Profiles, Timelines, and Audits. but basic functionality like being able to set breakpoint both in js files and within html javascript code is missing!. I tried to use javascript Console which itself is buggy ( like when once it encounter JS error, cannot get out of it unless refresh the whole page useless when ajax is involved). Can some one help?

share|improve this question

5 Answers

up vote 10 down vote accepted

Use the sources tab, you can set breakpoints in javascript there. In the dropdown underneath it (with the up and down arrow in it), you can select the file you want to debug. You can get out of an error by pressing resume on the right-hand side of the same tab.

share|improve this answer
5  
For some reason I see the list of included js files, but I cannot choose the executing page itself, it doesn't show in the list. Any ideas? – ulu Jun 26 '11 at 11:41
8  
@ulu, I had the same problem. Make sure your type="text/javascript" attribute is set on your <script> element. – contactmatt Dec 13 '11 at 19:03
up vote 61 down vote

Are you talking about code within <script> tags, or in the HTML tag attributes, like this?

<a href="#" onclick="alert('this is inline JS');return false;">Click</a>

Either way, the debugger keyword like this will work: 

<a href="#" onclick="debugger; alert('this is inline JS');return false;">Click</a>

N.B. Chrome won't pause at debuggers if the dev tools are not open.

You can also set property breakpoints in JS files and <script> tags:

  1. Click the Sources tab
  2. Click the Show Navigator icon and select the a file
  3. Double-click the a line number in the left-hand margin. A corresponding row is added to the Breakpoints panel (4).

enter image description here

share|improve this answer
4  
There is no Scripts tab. I see all other tabs that are in this picture but no Scripts tab !. – ace Mar 1 '11 at 15:51
I am using Chrome 9 on Linux. – ace Mar 1 '11 at 15:51
1  
I mean being able to set breakpoint within scrip tag in html. I also tried using debugger; keyword but it does not work. Chrome does not breakpoint on that but it works in Firefox. I am looking for breakpoint solution not based on debugger keyword which is inconvenient to put in lot of places in code and then having to delete. – ace Mar 1 '11 at 15:53
@Alan: even if you want to set a breakpoint in a <script> tag in HTML, you need to do it through the Scripts tab. I have no idea why your version of Chrome does not have that tab. – Matt Ball Mar 1 '11 at 15:55
5  
The tab is called Sources instead of Scripts now. – CoderDennis Aug 30 '12 at 21:57
show 6 more comments
up vote 7 down vote

Refresh the page containing the script whilst the developer tools are open on the scripts tab. This will add a (program) entry in the file list which shows the html of the page including the script. From here you can add breakpoints.

share|improve this answer
This didn't work for me. Instead, I clicked on a script error icon in the bottom right to open the program file in the scripts tab. – sanbikinoraion Feb 26 at 11:26
up vote 2 down vote

If you cannot see the "Scripts" tab, make sure you are launching Chrome with the right arguments. I had this problem when I launched Chrome for debugging server-side JavaScript with the argument --remote-shell-port=9222. I have no problem if I launch Chrome with no argument.

share|improve this answer
Could you elaborate please? I am having this exact problem - cannot see the scripts tab at all. I downloaded the latest developer build of chrome. – hugh Oct 25 '12 at 16:08
up vote 1 down vote

My situation and what I did to fix it:
I have a javascript file included on an HTML page as follows:
Page Name: test.html

<!DOCTYPE html>
<html>
    <head>
        <script src="scripts/common.js"></script>
        <title>Test debugging JS in Chrome</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div>
         <script type="text/javascript">
            document.write("something");
         </script>

        </div>
     </body>
</html>

Now entering the Javascript Debugger in Chrome, I click the Scripts Tab, and drop down the list as shown above. I can clearly see scripts/common.js however I could NOT see the current html page test.html in the drop down, therefore I could not debug the embedded javascript:

<script type="text/javascript">
  document.write("something");
</script>

That was perplexing. However, when I removed the obsolete type="text/javascript" from the embedded script: 

<script>
  document.write("something");
</script>

..and refreshed / reloaded the page, voila, it appeared in the drop down list, and all was well again.
I hope this is helpful to anyone who is having issues debugging embedded javascript on an html page.

share|improve this answer
Good job! Tested in Chrome 20.0.1132.57 on Mac 10.7.4 Submitted bug to Chromium project. – Michal Stefanow Jul 17 '12 at 23:30
Be aware that in HTML 4 and XHTML, type is a required attribute. In HTML5, it's optional. – hotshot309 Jul 27 '12 at 14:45
It doesn't have anything to do with type. The script is collected by VM after execution unless inspector is already opened at this point. When you reloaded the page it didn't collect the script. – vsevik Aug 8 '12 at 12:56

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.