Some features that will really help with debug

Event Listening

Open up Developer Tools and highlight a control with element inspector. Now click on Event Listeners button for a list of events listening on that control.

Notice the option to turn on/off event listeners from frameworks and event listeners from ancestors of the current element.

Async Events

These are events coming from functions like setTimeout() for example. To capture the events when they are fired, turn on a Async in the call stack area of Chrome Debugging tools.

You cannot step through but you can set a next breakpoint within code nesting.

Blackbox Script

Click to open a script you want to blackbox. While open, right click anywhere on the script and select "Blackbox".

Edit Live Code

Chrome has a concept called "Workspaces that allows users to edit script code from within the browser.

  • While viewing script code
  • Right click anywhere on the file to display context menu
  • Select "Add Folder to Workspaces"
  • Select a folder where your source files are stored
  • Give Chrome permissions to access the file system
  • Right click again on script file for context menu
  • Select "Map to File System Resource"
  • Chrome will display files with similar name found from the folder specified before. Chose your file from the list
  • Any changes made can now be saved directly to files on disk

View LocalStorage

Navigate to "Applications" section of developer tools, and select LocalStorage to see key value pairs stored for your project.

400 Bad Requests

Use the "Network Panel"

  • Filter for XHR requests if this is due to Ajax calls
  • Type a URL in filter text box to home in on requests you want
  • Fix the logic causing bad request

High Memory Usage

Record memory usage via profile

  1. Navigate to "Profile" panel in Dev tools
  2. Select "Record Allocation Timeline" and start recording

The blue bars indicate memory that was reserved and never released. Because this information may not be very useful except to evidence that we are holding onto memory, use the Timeline Panel to capture memory usage.