Javascript - Debugging

javascript

http://blog.teamtreehouse.com/introduction-source-maps - printed
https://blog.sentry.io/2015/10/29/debuggable-javascript-with-source-maps.html - printed
https://groups.google.com/forum/#!topic/google-chrome-developer-tools/DKUhxDzCZPc - done reading
https://developers.google.com/web/tools/chrome-devtools/
https://www.igvita.com/slides/2012/devtools-tips-and-tricks/#1
https://blog.chromium.org/2012/04/debugging-web-workers-with-chrome.html

http://www.youtube.com/watch?v=qTwxRJFHh40

Source map

// Breakpoints:

With most debuggers, we can set breakpoint by double-clicking on the grey 
margin containing the line number on the left side of the code until a red circle 
is displayed, or an icon that look like a tag is display on the line number.

// Conditional breakpoints:

To use conditional breakpoints, set the breakpoint as mentioned above, and 
then right click on the breakpoint and provide an expression.  Whenever, the 
expression is evaluated to true, the Debugger will stop at the breakpoint for 
us to inspect.  Conditional breakpoint is handy when we are inside a loop.

// Ways to intentionally cause errors:

Sometimes I want to test if the application's exception handler really catches 
errors. To cause the exception inside the app we can execute this in the browser 
console:

angular.element(document.body).injector().get('$rootScope').$apply(
  function bad() { 'use strict'; bad = 'bad'; }
);

The 'use strict' is necessary to make sure bad variable is a true error, and 
does not create new property on the window object.

// Source Map:

Support for source map is enabled by default in Firefox developer tools.  We 
may need to enable it manually for Chrome:

1. Launch the Chrome Dev tool
2. Click on Settings -> General
3. Look for "Enable JS source map" and "Enable CSS source map"

// Using the Chrome Developer Tools:

Using the Network tab, we can track all the requests, including AJAX requests.
The Network tab has a column named 'Initiator' which displays the file name 
and line number of the code that initiated this request.  Clicking on this should 
take us to the code that made this request.  We can then set breakpoint and 
examine the call stack as normal.  This is a way to learn the code that is 
making this request.  From the Network tab, we can also examine the request 
and response data.

Using Chrome Developer Tools we can simulate various mobile device.  In the 
left hand side of the top menu, next to the inspect icon, there is an icon that 
says "Toggle device toolbar".  When this icon is click, Chrome displays a bar 
at the top of the page, allow us to select the appropriate device that we wish 
to simulate.  We can also change the device orientation using this bar.  When 
this bar is display, we cannot do drag-and-drop.  To disable this device bar, 
click on the "phone icon" (the icon next to the inspect icon).

Use DevTools workspaces to add a local folder and map it to the network 
resources so that the dynamically loaded script file is always available and you 
could set breakpoint in it.

We can inspect shared workers in the Task Manager.  We can also pause workers 
when started.  To pause workers when started, check the check box under Workers 
(this is located several items below Breakpoints).

$('a')  === document.querySelector('a')
$$('a') === document.querySelectorAll('a');

document.body.contentEditable = true;

console.log('Some string:', objectName)

Preserve log

getEventListeners($('#myInput')) // displays a list of event listeners tied to a particular DOM element

monitorEvents($('#myInput')) // All the events associated with a particular element would be log to the console.

monitorEvents($('#myInput'), ['click', 'keyup', 'blur'])

unmonitorEvents($('#myInput'))

console.time('myTime');  // Start a timer
console.timeEnd('myTime'); // Stop a timer

console.table(myArray); // displays the array as a a table.

$_ is the result of the last expression.

console.trace() // See the call stack

function foo() {
  console.count('fooed');
}

foo(); // This will output 'fooed: 1'
foo(); // This will output 'fooed: 2'

profile('aaa');
...
profileEnd('aaa'); 

dir($('#myId')) // displays attributes of an element

inspect($('#myId')) // Find the element
inspect($$('a')[3])

$0 
$1
$2
$3
$4