How to Debug My JavaScript Code

Trying to debug Javascript in Chrome

Browsers (sometimes) have a hard time persisting breakpoints on dynamically loaded JavaScript. Simplest solution is to add a debugger; line in your code.

You may think you are not using eval, but whenever you set handlers in HTML, that is dynamically creating code that is then executed;

// Code loaded dynamically
function doSomething(y) {
    var x = 1;
    // If dev tools is open, it will treat `debugger` as a breakpoint
    debugger;
}

Or, in your example

<div class="col-md-5">
    @Html.DropDownListFor(model => model.SelectedRoleId,
        ViewBag.ReviewRoles as SelectList,
        new { @class = "form-control", 
        onchange = "debugger; OnChangeAjaxAction.call(this, 'reviewRole');", id = "ddlReviewRole" })
</div>

How to Debug a JavaScript code when it is loaded by document.write?

I suppose you have access to the source code that generates the document.write, you can add a call to the 'debugger' like this:

<script>
document.write('<sc' + 'ript> debugger; alert(0);</s' + 'cript>');
</script>

I you have the debugger opened on chrome, it will stop the execution and show the generated code on the Sources tab.

How do you launch the JavaScript debugger in Google Chrome?

Windows: CTRL-SHIFT-J OR F12

Mac: ⌥-⌘-J

Also available through the wrench menu (Tools > JavaScript Console):

Chrome Debugger for JS file only

In developer mode, select Sources tab, then navigate to your JS files in the left side. In the right panel, you can add a breakpoint to any line by pressing the line number which has a real js statement. Then you can run your application again to debug your js scripts.

The picture below is an example(Line 33 of assert.js is selected).

Can I debug JavaScript code in google script editor (Google Apps Script)

Use your web browser's built-in utilities to debug client-side Javascript. In Google Chrome, you can open the Developer Tools by pressing Ctrl-Shift-I or opening the menu and selecting More tools --> Developer tools.

---

Related Topics