Chrome console - breakpoint over whole file

Question

is there any option to set something like "breakpoint" on a file in chrome console (kindof shortcut to set breakpoint on every line of code in the file)?

Would be extremely useful when trying to understand 3rd party scripts that you know are executed but have no idea which part of code and from where is executed when.

My current example use case: I downloaded a script (form validation) which does not work as expected. The fastest way to solve the problem would be to pause execution anytime JS runtime enters this file and start exploring it from there.

Answer 1

I think this will be of use to you. I've recently been doing some work on the JavaScript Breakpoint Collection Chrome Extension created by Matt Zeunert, which allows you to inject breakpoints into your code at runtime - including breaking on property access/modifications, functions, scrolling events, etc. You can break on any arbitrary objects as well as the predefined ones using the console API.

Check out the project here.

Answer 2

If you can enumerate the functions publicly exposed by your third party script (for example if they are all properties of an object, or is their name has a pattern) you can make another script which dynamically replaces all those functions and force a break point :

thirdpartfunc = (function () {
  var oldfunc = thirdpartfunc; 
  return function () {
    debugger;
  oldfunc.call(null, arguments);
}());

With the appropriate binding to this (if any applicable).

Answer 3

If you know the function(s) being called, you can use function breakpoints

debug(function);
function(...args);

When you call the function, it will hit the breakpoint. These aren't saved on page reload, but you can set a line breakpoint once you hit the function breakpoint.

This can get kinda tedious though.

If you have a array of functions, you can do

[function0, function1].map(debug)

@Tibos answer in another post would be good if there was some sort of babel transform to insert debugger; at the start of every function, instead of inserting it manually.

Answer 4

The quickest way for me was to do a global replace of the function declarations in the source, adding "debugger;" at the start. In other words, replace

function [^{]*{

with

$0 debugger;

Your regexp may vary depending on the escapes you need. For example:

function [^{]*\{

You may also need more than one pattern to handle all the function declarations you have.

This has nothing to do with the Chrome console though.