Javascript - Debugging
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
// 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
page revision: 21, last edited: 15 Feb 2017 23:50