Debug script in browser's devtools

Answered

Comments

6 comments

  • Avatar
    Moti Granovsky

    Hi Marc,

    You can do that by adding the "debugger;" keyword anywhere in your widget or dashboard script, opening the developer console and refreshing. As the script is processed by the browser, it will stop execution at this point in the script and behave just like a manually added breakpoint.

    prism.on("beforemenu", function(){
    debugger;
    });
    0
    Comment actions Permalink
  • Avatar
    Bruce Christie

    Hey Moti,

    Did you have to change any settings to get this to work?  I added a debugger statement but it seems to be stripped out when transpiling.

     

    Cheers,

    Bruce

    0
    Comment actions Permalink
  • Avatar
    Moti Granovsky

    Hi Bruce, are you attempting to debug a plugin or a widget/dashboard script?

    0
    Comment actions Permalink
  • Avatar
    Bruce Christie

    Hi Moti,

    I was attempting to debug a plugin.   The code seems to run fine but it doesn't stop at my debugger statement.

    0
    Comment actions Permalink
  • Avatar
    Moti Granovsky

    Hi Bruce,

    It should work in plugins without issue. First of all, try placing a "console.log" at the exact location of your "debugger" statement and see if that does work - that is, if that line is really reached. If console.log works but "debugger" doesn't please let me know and we'll look into that. 

    Additionally, with plugins you can use Chrome's DevTools to place breakpoints anywhere in your code. You can find the plugin code in the location outlined in this screenshot below - find the code you're interested in, place a breakpoint and reload to see if that does stop. This is generally a better way to debug plugins than the "debugger" method, which is what I'd recommend only for widget & dashboard scripts.

    1
    Comment actions Permalink
  • Avatar
    Bruce Christie

    Hey Moti - thanks for the response.   Seems that my issue was that entry.json was not set proper;y in my local instance (isProd was true).

    ```

    {
    "isProd": false,
    "watchIgnore": [
    ".hg$",
    ".git$",
    "node_modules"
    ]
    }

    ```

    After that the code was non-minified and I could debug normally.  Thanks.

    0
    Comment actions Permalink

Please sign in to leave a comment.