Search code examples
javascriptgoogle-chromebreakpointsiife

is it possible to chrome debug iife javascript?


I've been running into this issue a lot recently. I go the source panel in chrome dev tools in order to debug some javascript. In the past I've clicked onto a line where I want the debugger to stop. The line number turns blue, then when I trigger the function call, the program stops and I can look at variables.

Recently I've run into a situation a couple time where I try to click into a function, but the display indicated I'm not setting a breakpoint. The thing that's common between both time is that I'm working with Immediately Invoked Function Expressions(IIFE). Is it possible to set breakpoints in a iife without access to the source code?


Solution

  • You mentioned being able to set a breakpoint in an IIFE without access to the source code, so I setup two examples that you can try where you do not have access to source assuming you meant local disk. In either example, I was able to set a break point on any of the relevant IIFE lines and step into/over as expected using Chrome.

    BTW - In neither example did I experience the behavior where Chrome did not set the breakpoint as expected.

    JSFiddle: https://jsfiddle.net/iamwaltuo/fu1pcwqf/

    Dropbox: https://www.dropbox.com/s/khlmi6c2fezv0tn/iifetest.html?raw=1

    <html>
        <head>
            <script type="text/javascript">
                (function () {
                    var i = 0;
                    console.log("i = " + i++);
                    console.log("i = " + i++);
                })();
            </script>       
        </head>
        <body>
            Check the console
        </body>
    </html>