The script enforces Javascript code quality and consistency by using JSHint. The script runs all new or modified Javascript files against JSHint for every commit; if it finds any issues it simply aborts the commit.
http://jt.io/2013/git-pre-commit-js-lint-script/
Category Archives: Debugging Tool
HTML5 Mobile Apps: Tips & Tricks
While the presentation is short, there are several golden chunks of information here:
https://speakerdeck.com/elijahglover/html5-mobile-apps-tips-and-tricks
Mobile Emulators & Simulators: The Ultimate Guide
I happen to be fortunate enough to work for a company that has a tremendous device lab, but for those that do not have such access to real devices, the next best step would be simulators and emulators.
And here is the mother of all lists:
http://www.mobilexweb.com/emulators
Apply a Custom Theme to Your Chrome Inspector
Ever want to change the look of your Google Chrome Web Inspector? I personally love being able to customize the “theme” or “brush” of my favorite IDE and my Web Inspector is no different. If you’ve ever done some snooping around Google Chrome’s Web Inspector you may have noticed that it’s made of straight HTML + CSS + JavaScript
http://darcyclarke.me/design/skin-your-chrome-inspector/
I personally love dark backgrounds, and found this theme pretty great:
https://gist.github.com/bentruyman/1150520
Except that when you Edit as HTML, the font disappears as black-on-black. From the comments, this bit fixes the problem:
#elements-content .editing,
#elements-content .editing *,
#elements-content .child-editing {
background-color: white !important;
color: black !important;
display: block;
}
Device Debugging Options
An extremely thorough guide to being able to debug Android devices via a USB connection. Which of course requires you to download and install the Android Developer SDK, install Chrome on your Android device, and then of course, this all only works on Android devices…
http://www.html5rocks.com/en/mobile/profiling/
So, while not a full debugging suite, Steve Souders offers instructions for at least being able to create waterfall charts for mobile pages, which is useful for finding and debugging performance hiccups.
http://www.stevesouders.com/blog/2013/03/26/mobile-waterfalls/
And speaking of debugging, think you know Chrome DevTools? Well, take a class and find out…
http://blog.chromium.org/2013/03/discover-chrome-devtools-our-new.html
Detect Vendor Prefix with JavaScript
A tiny script to determine the various vendor prefixes you might need for your DOM, CSS, and JS needs:
http://davidwalsh.name/vendor-prefix
Using Web Debugging Proxies
Terrific run-down of debugging alternatives, from console panels to Fiddler and beyond:
http://net.tutsplus.com/tutorials/using-web-debugging-proxies/
WebDriver API Draft Published, Enables Remote Browser Control For Automated Tests
It’s not here yet, but…
The W3C just published a draft of the WebDriver API, which will enable browser and platform agnostic control over browsers for automated testing… and [it] looks to be a fairly nice way to write scripts to control browser behavior, DOM manipulation and inspection, and more from a separate controlling process. This will make it possible for automated testing scripts to open browser windows, run tests, and get results back from multiple browsers simultaneously.
http://badassjs.com/post/40778765073/webdriver-api-draft-published-enables-remote-browser
Testing Layout on Multiple Devices: Remote Preview
Remote preview is a tiny JavaScript based tool which … allows you to preview any URL on large number of mobile devices simultaneously. Just enter a URL, hit enter, and new URL gets automatically loaded on each device. Remote preview works on platforms like Android, Blackberry, iOS, Maemo, Meego, Symbian, Windows Phone and WebOS.
Introduction to JavaScript Source Maps
Ever tried to find a bug in minified or obfuscated code? Whether it is HTML, CSS or JS, it is a serious pain. Until JS Source Maps appeared, that is…
http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/
The article is thorough (read: a little long, for some), so here is a demo:
- Go here: http://www.thecssninja.com/demo/source_mapping/
- Right click something in the obfuscated code and click the “Get original location” link that appears
- Be amazed at what appears in the text box above the obfuscated code…
How does this voodoo work??
- Two requirements: 1) Use Google’s Closure compiler to combine/minify/obfuscate your JS files, and 2) Debug using Google Chrome (currently only Canary, with the “Enable source maps” setting checked).
- Closure compiler, let’s you set a flag to create a Source Map file.
- A Source Map file is created and place on your server beside your minified JS file.
- A comment is added to your minified JS file telling Chrome that the Source Map file exists, and where to find it.
- When you click that “Get original location” link, the Source Map file is fetched and the look-up is done.
Not completely ready for prime-time just yet, but coming soon!
Tactile Team 