Use Chrome DevTools as the Front End Development Environment

It is more efficient to use DevTools as the front end development environment than using Visual Studio.

If I choose to use IE 8 user agent under DevTools settings, which is equivalent to Mozilla 4, when viewing element’s user agent style in chrome, the -webkit- styles will be disabled, instead the selected user agent styles will be active. This means the selected user agent is not only what the browser tells the server and the browser also behaves as the selected user agent. In other words, you could stay in Chrome to check how your pages look like in different browsers.

Sources Panel

  1. for viewing and modifying css and js files, including pretty print minified js code
  2. ctrl + s can save a browser local modification
    • right mouse in source code can load local modifications”
    • time tag with modifications will show, to apply original or apply revision content
    • revert to original
  3. Image

  4. save as to save a hard copy or save to the workspace if it has been allowed
  5. setting break points and debugging js code

Image

Console Panel

  1. log and command line
  2. the command line allows any JavaScript commands
  3. console.log(‘createEvent called’); console.log(console);
  4. to get the console commands: https://developers.google.com/chrome-developer-tools/docs/console-api
    • console.log(“I can’t wait to run my 5K”)
    • console.log(document.getElementById(“events”))
    • calendar.countEvents()
    • console.assert(Calendar.countEvents() == 3)
    • console.warn(“Watch out!”)
  5. inspect($(“#date”)[0]) to find where is the element inside the DOM
  6. $0, $1, $2 … to find the select history from the most recent (i.e., select an element in element penal, then $0 in the console points that same element)

References
http://developer.chrome.com/extensions/samples.html#devtools
https://developers.google.com/chrome-developer-tools/docs/shortcuts
https://developers.google.com/chrome-developer-tools/docs/settings
https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks
http://blog.angularjs.org/2012/07/introducing-angularjs-batarang.html
http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/
https://plainaveragemind.wordpress.com/2013/10/12/chrome-devtools-a-pictoral/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s