This has info on js web developer tools for debugging, inspecting, analyzing — things like Chrome DevTools, Firebug, and Firebug Lite.
Browser-based developer tools
The rest of this post just provides some summary info on a few different tools and then provides links to more detailed info on each.
Ok, I'm going to cheat here and just quote from the Chrome DevTools intro page since it has a nice succinct definition: "The Chrome Developer Tools (DevTools for short), are a set web authoring and debugging tools built into Google Chrome. The DevTools provide web developers deep access into the internals of the browser and their web application."
Screengrab showing DOM elements to the left, CSS to right
Screengrab showing Timeline of memory usage
- Google's "Chrome DevTools Overview"
- Sixrevisions.com has a list of quality "Google Chrome DevTools Tutorials"
- Paul Irish's video "Google Chrome Developer Tools: 12 Tricks to Develop Quicker"
- Google I/O usually addresses the state of Chrome DevTools, here's a video from Google I/O 2012 and here one on Chrome DevTools 2013 enhancements (2014 is below in the section on device testing since that was the main focus of the 2014 talk)
- Addy Osmani has a Chrome Devtools "State of the Union" for 2015, both video and speakerdeck
- Majd Taby's very useful post on webkit inspector (part 1)
- Andi Smith post on devools secrets
- tutsplus.com tutorials on tools and tips for Chrome DevTools and JS performance
- Addy Osmani and Paul Irish video series on using Chrome DevTools (episode 1)
- Addy Osmani on performance optimisation with timeline- and profiles
- developers.google.com on using DevTools for CPU profiling
- to keep up with new features you can check out html5rocks, with info on updates are often available there — for example here's "DevTools Digest - Chrome 35"
Chrome DevTools device mode
Here are some features of Chrome DevTools device mode:
- presets for dozens of devices including all models of iPhone and iPad and many Android devices from Samsung, HTC, Sony, etc.
- sets correct device pixel ratio, including retina display
- honors viewport setting
- honors and displays active media queries and shows which affect your page
- touch emulation (fires touch events, not mouse events, and suppresses hover events)
- lets you modify user agent
- lets you throttle network to emulate slower cell phone networks
While Chrome DevTools device mode doesn't emulate all mobile devices with 100% fidelity it's usually very close, especially with some devices. This makes it incredibly useful as you're developing, giving you a quick approximation of how your page will lay out on a smaller screen. Very importantly it does honor media queries and displays these above your layout as colored bars, clearly showing which impact your page. And of course because you're doing this in Chrome DevTools you have all the standard features that can make life so much easier — ability to inspect and modify the DOM, to see and change CSS values, to monitor network traffic, to find and destroy performance bottlenecks, etc.
Note that Chrome DevTools device mode isn't perfect (e.g., device setting can get lost when switching to landscape) and there are some limitations (see realeyes.com post below for some of these). Despite its limitations Chrome's device mode is absolutely worth a look if you aren't already using a full-featured emulator. See the links below for more info.
TIP: As of this writing there's an issue with loading a page with a device profile already selected (e.g., iPhone 5) — sometimes the page clearly doesn't lay out correctly. If this happens just selecting a different device (e.g., iPhone 6) and then returning to your original setting (iPhone 5) will usually correct the problem.
Chrome DevTools in device mode
Bottom line with device mode is that it's extremely useful but not perfect, so use it for development but for final deployment be sure to test on as many physical devices as you can.
Resources: DevTools mobile device mode
- Google Chrome developer site intro to device mode
- Google's video overview of DevTools device mode
- cross-device development and testing was the main focus of "Google I/O 2014 - Developing across Devices - DevTools in 2014"
- this realeyes.com post "A Quick Guide to Chrome’s New Built-in Device Emulation" is excellent
Mobile web devtools
Mobile browsers don't have the wide-ranging developer tools you'll find in desktop browsers. In fact, while some older mobile browsers have a console available (e.g., Android stock browser) most don't have even that. And of course just having a console isn't what you want, you want to be able to inspect the DOM, view CSS properties, analyze network traffic, etc. There are tools for this, it's just not quite as simple as using the built-in tools of desktop browsers. Some options include Safari's web inspector, Weinre, Chrome DevTools USB debugging for mobile, and FirebugLite. I'll focus on those last two.
Chrome USB debugger
Chrome DevTool remote USB debugging feature lets you debug Android Chrome sessions using the same Chrome DevTools you use for desktop. Literally — you'll do your debugging in a desktop Chrome instance, with that desktop machine connected to your mobile device via USB. Note that this is only Chrome-to-Chrome, so you can't use this for debugging something happening in a Safari session (though Apple has a web inspector with essentially the same functionality).
To use Chrome's USB debugging you need
a bit of the Android sdk, something called adb (Android debug bridge). If you have the Android sdk installed then you're good to go. If you don't then you can install it or take a much simpler route, installing Paul Irish's ADB plugin for Chrome. Note that Windows users will also need a USB driver. UPDATE: forget the above info on ADB, Goggle has made things even easier, now there's no setup required: "You no longer need to configure ADB or the ADB plugin to debug remote browser tabs and WebViews. Remote debugging for Android is now part of the standard Chrome DevTools."
Resources: Chrome DevTools remote for mobile
- developers.google.com on DevTools remote-debugging
- html5rocks.com page on mobile profiling
- Youtube: The Breakpoint Ep. 7: Profiling a mobile site with Chrome DevTools and Android (and other episodes, esp 6 and 8)
Try this link for a test drive: Run Firebug Lite (be patient, takes a moment to load). You can click here to send "howdy!" to the console.
Note that I've had some problems displaying script files at times, occasionally getting access errors or the wrong file displayed, but overall Firebug Lite is a very useful tool for debugging mobile web apps.
Resources: Firebug Lite
SPA Demo Application
Backbone Demo Application
- Addy Osmani's blog
- Derick Bailey's Backbone posts
- Murphey's JQuery Fundamentals (original)
- Crockford's JS videos
- MSDN Project Silk
- Primer on Flex/AIR Multiscreen Development
- Primer on Mobile App Development w/Flex 4.5
- Primer on Flex 3 Component Lifecycle
- Primer on Flexlib MDI
all require Flash Player!
AIR mobile dev
- AIR mobile dev Tips
- AIR and Android Back key
- AIR, StageWebView, displaying local content
- AIR for Android memory issue w/large images