Great developer tool tip for AngularJS

TL;DR

  • click on an element to inspect in Element from devTools
  • go to Console and type $scope
  • access the scope variables right away

In my recent project, a lot of business logic is pushed to frontend, which means a lot of Lodash chains with nested objects. I've always known to use Batarang to inspect elements and find out all the scope variables, and also to use Console to get the element and retrieve the objects directly. However, doing this in Console involves finding the right div/id to fetch the correct element and going through extensive trial and error just to be able to manipublate the objects right away.

Today, I just came across this shortcut while debugging. Chrome devTools is amazing! Here are the quick steps with images:

Step 1: inspect the element where your scope variables live

Step 2: Go to Console, and type $scope, which is available in the typeahead dropdown list now

Step 3: find out the variable that you need to manipulate

Step 4: fetch the list of titles in the angular-gulp yeoman generator homepage

A quick example to modify the variables and reflect them in html:

$scope.awesomeThings[0].title = 'Testing'
$scope.$apply();
comments powered by Disqus