1. Web Dev Tools Review
leechwin1@gmail.com
2013. 11

2. Outline
•
•
•
•
•
•
•
•
•
•
•
•
Command-line
Terminal
Quick Start
Recorder
Editor
Chrome DevTools
Integration tools
Synchronized
Visual regression testing
Simulate real-network conditions
Live testing and Screenshots
Mobile Web

3. Command-line
•
Script common tasks
•
Setting for terminal env
•
•
Init for dotfiles( .aliases, .bash_profile, .bash_prompty, .bashrc, .gitconfig etc...)
Shared for common env setting
•
•
When you use a different computer, you can restore your settings
Command wrapping ( .functions )
•
Make custom shell command for easy to use
// Start up a new local server
$server
// $python -m SimpleHTTPServer ...
• Github: https://github.com/mathiasbynens/dotfiles
• Article: http://net.tutsplus.com/tutorials/tools-and-tips/setting-up-amac-dev-machine-from-zero-to-hero-with-dotfiles/

4. Terminal
•
iTerm 2
•
iTerm 2 is a terminal emulator for Mac OS X
•
•
http://www.iterm2.com
Autocomplete
• Replay
Past History

5. Quick Start
•
Alfred
•
Search for files online or on Mac
•
•
http://www.alfredapp.com/
Github: https://github.com/zenorocha/alfred-workflows
• Launchy
• On Windows
• http://launchy.net/index.php

6. Recorder(1)
•
Automator
•
Point-and-click automation of repetitive tasks on Mac OS
•
•
For some services, automated service creation(Mail, File and Image etc.)
http://www.macosxautomation.com/automator/

7. Recorder(2)
•
Macro Recorder
• Keyboard and mouse recorder on Windows
• http://www.jitbit.com/macro-recorder/

8. Editor(1)
•
Sublime Autoprefixer
•
Sublime plugin to prefix your CSS
•
•
Create for browser vender prefix
http://www.macosxautomation.com/automator/

9. Editor(2)
•
Emmet (Zen Coding)
•
Sublime plugin to Emmet (Zen Coding)
•
•
•
HTML, CSS
http://emmet.io/
Github: https://github.com/sergeche/emmet-sublime

10. Editor(3)
•
Sublime TernJS
•
Sublime plugin to TernJS
•
•
•
Tern is a stand-alone code-analysis engine for JavaScript
http://ternjs.net/
http://ternjs.net/doc/demo.html

11. Editor(4)
•
Sublime Build System
•
Sublime plugin to grunt
•
•
Sublime build
http://bit.ly/sublime-grunt

12. Editor(5)
•
SublimeLinter
•
Inline lint highlighting for the Sublime Text editor
•
•
HTML, CSS, Javascript
https://github.com/SublimeLinter/SublimeLinter

13. Chrome DevTools(1)
•
Chrome DevTools
•
•
https://developers.google.com/chrome-developer-tools/
Workspace
•
•
•
Add and edit local projects. Breakpoints persist. Debug in-place.
Look like web based ide
https://developers.google.com/chrome-developer-tools/

14. Chrome DevTools(2)
•
Soucre Maps
•
•
Source map is mapping between converted source and original source.
Link to sass and less source
•
https://developers.google.com/chrome-developer-tools/docs/css-preprocessors

15. Chrome DevTools(3)
•
CSS Pretty-printing
•
Support CSS
•
https://developers.google.com/chrome-developer-tools/docs/css-preprocessors

16. Chrome DevTools(4)
•
Ignoring library code
•
Ignoring library code while debugging in Chrome
•
http://www.divshot.com/blog/tips-and-tricks/ignoring-library-code-whiledebugging-in-chrome/

17. Chrome DevTools(5)
•
Terminal
•
Terminal in Chrome Devtools
•
•
•
•
Server: installed devtools-terminal
Client: installed chrome extension then use terminal tab
Github: https://github.com/petethepig/devtools-terminal
Chrome extension: https://chrome.google.com/webstore/detail/devtoolsterminal/leakmhneaibbdapdoienlkifomjceknl

18. Chrome DevTools(6)
•
Debugging
•
•
•
•
https://developers.google.com/chrome-developer-tools/docs/remotedebugging
Remote Debugging
USB Debugging
Etc
•
iOS WebKit Debug Proxy: https://github.com/google/ios-webkit-debug-proxy

19. Chrome DevTools(7)
•
Emulation
https://developers.google.com/chrome-developer-tools/docs/mobile-emulation
Emulating Touch Events
•
•
•
Mouse actions will now also trigger the relevant touch events: touchstart, touchmove and touchend.
•
Debugging touch events

20. Chrome DevTools(8)
•
Emulation
Emulating Device Viewports
•
•
Emulate and debug mobile viewport issues like CSS media query breakpoints for various devices and setting

21. Chrome DevTools(9)
•
Emulation
Emulating Geolocation
•
•
•
•
Useful to debug the output received when using different values for longitude and latitude
http://html5demos.com/geo
Lat = 41.4949819 and Lat = -0.1461206

22. Chrome DevTools(10)
•
Emulation
Emulating Orientation
•
•
•
Accelerometers, gyroscopes, compasses and other hardware designed to determine capture motion and
orientation
http://www.html5rocks.com/en/tutorials/device/orientation/deviceorientationsample.html

23. Chrome DevTools(11)
•
Emulation
Emulating Media Type
•
•
•
CSS media types allow us to apply different styles to a page
http://www.html5rocks.com/en/mobile/high-dpi/

24. Integration tools(1)
•
Sublime Web Inspector
•
Debugger. Breakpoints. Console. Evaluate call frames
•
•
Sublime plugin to debug
http://sokolovstas.github.io/SublimeWebInspector/

25. Integration tools(2)
•
Emmet LiveStyle
•
Edit CSS. See changes live in Chrome *without* a browser refresh
•
•
Runtime css editing
It look like livereload for css
•
http://livestyle.emmet.io/

26. Integration tools(3)
•
Adobe Brackets
•
Bi-directional HTML live editing with Chrome
•
•
http://brackets.io/
Brackets Review
•
Image Preview and Pixel Guides
•
•
Support Image Preview
Support Image Pixel Guide Line
•
It useful for css sprite

27. Integration tools(4)
•
Tailor
•
Brackets + Git for ChromeOS

28. Integration tools(5)
•
WebStorm
•
The JavaScript IDE
•
•
http://www.jetbrains.com/webstorm/
Live Edit with Chrome(Chrome extension)

29. Integration tools(6)
•
WebStorm
•
Debug with Chrome(Chrome extension)

30. Integration tools(7)
•
WebStorm
•
Terminal

31. Integration tools(8)
•
WebStorm
•
Support node.js
•
Integrated node.js package manager
•
Debug and validate

32. Integration tools(9)
•
WebStorm
•
REST Client
•
Import/export of XML files with REST Client Requests, and compressed responses.
•
http://blog.jetbrains.com/webide/2013/02/using-the-rest-client-within-phpstorm/

33. Integration tools(10)
•
WebStorm
•
JavaScript Unit Testing
•
http://blog.jetbrains.com/webide/2011/10/javascript-unit-testing-support/

34. Integration tools(11)
•
WebStorm
•
•
Zen Coding with Emmet
Javascript
•
•
Support for CoffeeScript and TypeScript
Editor
•
DOM-Based, Browser-Specific Completion

35. Integration tools(12)
•
WebStorm
•
CSS
•
Support for Sass, Less and Stylus

36. Integration tools(13)
•
WebStorm
•
HTML
•
Editor
•
Show Content
•
•
Quick Definition Lookup on a CSS ID immediately shows a popup displaying
When invoked on an image file reference then image preview

37. Integration tools(14)
•
WebStorm
•
Spellchecker
•
•
Spellchecker verifies texts in tags, code strings, comments to avoid misspellings
and typos on web pages
Smart Duplicated Code Detector
•
Find duplicated code

38. Integration tools(15)
•
LightTable
•
Python development IDE
•
•
http://www.lighttable.com/
http://www.kickstarter.com/projects/ibdknox/light-table

39. Synchronized(1)
•
Remote Preview
•
https://github.com/viljamis/Remote-Preview
•
http://viljamis.com/blog/2012/remote-preview/

40. Synchronized(2)
•
Remote Preview
• Remote Device: Connected for Service URL(Remote Preview Project)
•
•
Polling URLs (url: url.txt)
Change to iframe src attribute

41. Synchronized(3)
•
Adobe Edge Inspect
•
Chrome browser will get mirrored to the devices
•
http://html.adobe.com/edge/inspect/
•
•
•
Setting up Edge Inspect with network
•
•
•
•
•
•
•
http://www.adobe.com/inspire/2012/12/web-designs-edge-inspect.html
http://tv.adobe.com/watch/adobe-evangelists-paul-trani/introducing-adobe-edgeinspect/
Host: Edge Inspect and Chrome extension
Client: Edget Inspect mobile device client
To use Edge Inspect, your devices and computer must be connected to the same
wireless network
Previewing live web content on connected devices
Remote inspection
Take a Screenshot
Refreshing devices remotely

42. Synchronized(4)
•
Adobe Edge Inspect

43. Synchronized(5)
•
Ghostlab
•
Synchronized testing for web and mobile on Mac OS X
•
•
•
•
•
•
http://vanamco.com/ghostlab/
Creates server to folder contents
Syncs scrolls, clicks and reloads
Debug button to open a browser window that will allow you to directly connect to the client
using the built-in WEINRE server
Host: Ghostlab server is running (e.g. http://192.168.1.4:8080)
Remote Device: Connect to host Ghostlab server

44. Synchronized(6)
•
Live Reload with Grunt
•
When you run grunt server from the root directory of your project it watches
for changes to your site files and refreshes the browser window
automatically
•
https://github.com/gruntjs/grunt-contrib-watch

45. Visual regression testing(1)
•
Wraith
•
•
•
A responsive screenshot comparison tool
PhantomJS or SlimerJS to create screen-shots of different environments
Creates a diff of the two images, the affected areas are highlighted in blue
•
http://github.com/bbc-news/wraith

46. Visual regression testing(2)
•
PhantomCSS
•
Visual/CSS regression testing with PhantomJS
•
•
•
•
https://github.com/Huddle/PhantomCSS
Generates a screenshot of a portion of the page, defined using
the CSS selector
Generate a new screenshot and compare it to the original
Differences are depicted in pink

47. Simulate real-network conditions(1)
•
Network Link Conditioner
•
Simulate the network environment on Mac OS X
•
•
http://nshipster.com/network-link-conditioner/
Network Link Conditioner is available on the devices themselves
•
Connect iPhone or iPad to Mac

48. Simulate real-network conditions(2)
•
Slowy app
•
Real-world connection simulator and bandwidth limiter on Mac OS X
•
http://slowyapp.com/

49. Live testing and Screenshots(1)
•
Open Device Lab(ODL)
•
http://opendevicelab.com/
•
•
•
•
http://mobile.smashingmagazine.com/2012/09/24/establishing-an-open-device-lab/
http://devicelab.fi/
Web and app developers to go to use a shared community pool of devices
Non-profit and free for the community to use

50. Live testing and Screenshots(2)
•
Open Device Lab(ODL)

51. Live testing and Screenshots(3)
•
Sauce Labs
•
•
•
https://saucelabs.com/
Cross-Browser Testing
Upload app to Sauce Labs storage and tested in Sauce Labs' cloud

52. Live testing and Screenshots(4)
•
Sauce Labs

53. Live testing and Screenshots(5)
•
Sauce Labs

54. Live testing and Screenshots(6)
•
BrowserStack
•
Cross-Browser Testing
•
•
•
•
http://www.browserstack.com/
Tests on virtual machines and devices.
Support screenshot and responsive test(Free)
Support live debugging

55. Live testing and Screenshots(7)
•
BrowserStack

56. Live testing and Screenshots(8)
•
BrowserStack
•
Rapidly test website for cross browser compatibility

57. Live testing and Screenshots(9)
•
BrowserStack
•
Responsive Design Testing across Devices

58. Live testing and Screenshots(10)
•
Browserling
•
Cross Browser Testing
•
•
https://browserling.com/
Tests on virtual machines

59. Live testing and Screenshots(11)
•
Browserling

60. Mobile Web
•
Mobile Web Guide
•
http://www.mobilexweb.com/
•
Mobile Emulators & Simulators: The Ultimate Guide
•
•
http://www.mobilexweb.com/emulators
HTML5 compatibility on mobile and tablet browsers with testing on real devices
•
http://mobilehtml5.org/

61. Reference
•
Automating Front-end Workflow
•
https://speakerdeck.com/addyosmani/automating-front-end-workflow

62. Thank you.