Web Dev Tools Review
leechwin1@gmail.com

2013. 11
Outline
•
•
•
•
•
•
•
•
•
•
•
•

Command-line
Terminal
Quick Start
Recorder
Editor
Chrome DevTools
Integration tools
Synch...
Command-line
•

Script common tasks
•

Setting for terminal env
•
•

Init for dotfiles( .aliases, .bash_profile, .bash_pro...
Terminal
•

iTerm 2
•

iTerm 2 is a terminal emulator for Mac OS X
•

•

http://www.iterm2.com

Autocomplete

• Replay

Pa...
Quick Start
•

Alfred
•

Search for files online or on Mac
•
•

http://www.alfredapp.com/
Github: https://github.com/zenor...
Recorder(1)
•

Automator
•

Point-and-click automation of repetitive tasks on Mac OS
•
•

For some services, automated ser...
Recorder(2)
•

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

Sublime Autoprefixer
•

Sublime plugin to prefix your CSS
•
•

Create for browser vender prefix
http://www.ma...
Editor(2)
•

Emmet (Zen Coding)
•

Sublime plugin to Emmet (Zen Coding)
•
•
•

HTML, CSS
http://emmet.io/
Github: https://...
Editor(3)
•

Sublime TernJS
•

Sublime plugin to TernJS
•
•
•

Tern is a stand-alone code-analysis engine for JavaScript
h...
Editor(4)
•

Sublime Build System
•

Sublime plugin to grunt
•
•

Sublime build
http://bit.ly/sublime-grunt
Editor(5)
•

SublimeLinter
•

Inline lint highlighting for the Sublime Text editor
•
•

HTML, CSS, Javascript
https://gith...
Chrome DevTools(1)
•

Chrome DevTools
•

•

https://developers.google.com/chrome-developer-tools/

Workspace
•
•
•

Add an...
Chrome DevTools(2)
•

Soucre Maps
•
•

Source map is mapping between converted source and original source.
Link to sass an...
Chrome DevTools(3)
•

CSS Pretty-printing
•

Support CSS
•

https://developers.google.com/chrome-developer-tools/docs/css-...
Chrome DevTools(4)
•

Ignoring library code
•

Ignoring library code while debugging in Chrome
•

http://www.divshot.com/b...
Chrome DevTools(5)
•

Terminal
•

Terminal in Chrome Devtools
•
•
•
•

Server: installed devtools-terminal
Client: install...
Chrome DevTools(6)
•

Debugging
•

•
•
•

https://developers.google.com/chrome-developer-tools/docs/remotedebugging
Remote...
Chrome DevTools(7)
•

Emulation
https://developers.google.com/chrome-developer-tools/docs/mobile-emulation
Emulating Touch...
Chrome DevTools(8)
•

Emulation
Emulating Device Viewports

•
•

Emulate and debug mobile viewport issues like CSS media q...
Chrome DevTools(9)
•

Emulation
Emulating Geolocation

•
•
•
•

Useful to debug the output received when using different v...
Chrome DevTools(10)
•

Emulation
Emulating Orientation

•
•

•

Accelerometers, gyroscopes, compasses and other hardware d...
Chrome DevTools(11)
•

Emulation
Emulating Media Type

•
•
•

CSS media types allow us to apply different styles to a page...
Integration tools(1)
•

Sublime Web Inspector
•

Debugger. Breakpoints. Console. Evaluate call frames
•
•

Sublime plugin ...
Integration tools(2)
•

Emmet LiveStyle
•

Edit CSS. See changes live in Chrome *without* a browser refresh
•
•

Runtime c...
Integration tools(3)
•

Adobe Brackets
•

Bi-directional HTML live editing with Chrome
•
•

http://brackets.io/
Brackets R...
Integration tools(4)
•

Tailor
•

Brackets + Git for ChromeOS
Integration tools(5)
•

WebStorm
•

The JavaScript IDE
•

•

http://www.jetbrains.com/webstorm/

Live Edit with Chrome(Chr...
Integration tools(6)
•

WebStorm
•

Debug with Chrome(Chrome extension)
Integration tools(7)
•

WebStorm
•

Terminal
Integration tools(8)
•

WebStorm
•

Support node.js
•

Integrated node.js package manager

•

Debug and validate
Integration tools(9)
•

WebStorm
•

REST Client
•

Import/export of XML files with REST Client Requests, and compressed re...
Integration tools(10)
•

WebStorm
•

JavaScript Unit Testing
•

http://blog.jetbrains.com/webide/2011/10/javascript-unit-t...
Integration tools(11)
•

WebStorm
•
•

Zen Coding with Emmet
Javascript
•
•

Support for CoffeeScript and TypeScript
Edito...
Integration tools(12)
•

WebStorm
•

CSS
•

Support for Sass, Less and Stylus
Integration tools(13)
•

WebStorm
•

HTML
•

Editor
•

Show Content
•
•

Quick Definition Lookup on a CSS ID immediately s...
Integration tools(14)
•

WebStorm
•

Spellchecker
•

•

Spellchecker verifies texts in tags, code strings, comments to avo...
Integration tools(15)
•

LightTable
•

Python development IDE
•
•

http://www.lighttable.com/
http://www.kickstarter.com/p...
Synchronized(1)
•

Remote Preview
•

https://github.com/viljamis/Remote-Preview
•

http://viljamis.com/blog/2012/remote-pr...
Synchronized(2)
•

Remote Preview
• Remote Device: Connected for Service URL(Remote Preview Project)
•
•

Polling URLs (ur...
Synchronized(3)
•

Adobe Edge Inspect
•

Chrome browser will get mirrored to the devices
•

http://html.adobe.com/edge/ins...
Synchronized(4)
•

Adobe Edge Inspect
Synchronized(5)
•

Ghostlab
•

Synchronized testing for web and mobile on Mac OS X
•
•
•
•
•
•

http://vanamco.com/ghostla...
Synchronized(6)
•

Live Reload with Grunt
•

When you run grunt server from the root directory of your project it watches
...
Visual regression testing(1)
•

Wraith
•
•
•

A responsive screenshot comparison tool
PhantomJS or SlimerJS to create scre...
Visual regression testing(2)
•

PhantomCSS
•

Visual/CSS regression testing with PhantomJS
•

•
•
•

https://github.com/Hu...
Simulate real-network conditions(1)
•

Network Link Conditioner
•

Simulate the network environment on Mac OS X
•

•

http...
Simulate real-network conditions(2)
•

Slowy app
•

Real-world connection simulator and bandwidth limiter on Mac OS X
•

h...
Live testing and Screenshots(1)
•

Open Device Lab(ODL)
•

http://opendevicelab.com/
•
•

•
•

http://mobile.smashingmagaz...
Live testing and Screenshots(2)
•

Open Device Lab(ODL)
Live testing and Screenshots(3)
•

Sauce Labs
•
•
•

https://saucelabs.com/
Cross-Browser Testing
Upload app to Sauce Labs...
Live testing and Screenshots(4)
•

Sauce Labs
Live testing and Screenshots(5)
•

Sauce Labs
Live testing and Screenshots(6)
•

BrowserStack
•

Cross-Browser Testing
•

•
•
•

http://www.browserstack.com/

Tests on ...
Live testing and Screenshots(7)
•

BrowserStack
Live testing and Screenshots(8)
•

BrowserStack
•

Rapidly test website for cross browser compatibility
Live testing and Screenshots(9)
•

BrowserStack
•

Responsive Design Testing across Devices
Live testing and Screenshots(10)
•

Browserling
•

Cross Browser Testing
•
•

https://browserling.com/
Tests on virtual ma...
Live testing and Screenshots(11)
•

Browserling
Mobile Web
•

Mobile Web Guide
•

http://www.mobilexweb.com/

•

Mobile Emulators & Simulators: The Ultimate Guide

•

•
h...
Reference
•

Automating Front-end Workflow
•

https://speakerdeck.com/addyosmani/automating-front-end-workflow
Thank you.
Upcoming SlideShare
Loading in …5
×

Web dev tools review

4,366 views
4,209 views

Published on

Published in: Technology, Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,366
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
29
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Web dev tools review

  1. 1. Web Dev Tools Review leechwin1@gmail.com 2013. 11
  2. 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. 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. 4. Terminal • iTerm 2 • iTerm 2 is a terminal emulator for Mac OS X • • http://www.iterm2.com Autocomplete • Replay Past History
  5. 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. 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. 7. Recorder(2) • Macro Recorder • Keyboard and mouse recorder on Windows • http://www.jitbit.com/macro-recorder/
  8. 8. Editor(1) • Sublime Autoprefixer • Sublime plugin to prefix your CSS • • Create for browser vender prefix http://www.macosxautomation.com/automator/
  9. 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. 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. 11. Editor(4) • Sublime Build System • Sublime plugin to grunt • • Sublime build http://bit.ly/sublime-grunt
  12. 12. Editor(5) • SublimeLinter • Inline lint highlighting for the Sublime Text editor • • HTML, CSS, Javascript https://github.com/SublimeLinter/SublimeLinter
  13. 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. 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. 15. Chrome DevTools(3) • CSS Pretty-printing • Support CSS • https://developers.google.com/chrome-developer-tools/docs/css-preprocessors
  16. 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. 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. 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. 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. 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. 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. 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. 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. 24. Integration tools(1) • Sublime Web Inspector • Debugger. Breakpoints. Console. Evaluate call frames • • Sublime plugin to debug http://sokolovstas.github.io/SublimeWebInspector/
  25. 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. 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. 27. Integration tools(4) • Tailor • Brackets + Git for ChromeOS
  28. 28. Integration tools(5) • WebStorm • The JavaScript IDE • • http://www.jetbrains.com/webstorm/ Live Edit with Chrome(Chrome extension)
  29. 29. Integration tools(6) • WebStorm • Debug with Chrome(Chrome extension)
  30. 30. Integration tools(7) • WebStorm • Terminal
  31. 31. Integration tools(8) • WebStorm • Support node.js • Integrated node.js package manager • Debug and validate
  32. 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. 33. Integration tools(10) • WebStorm • JavaScript Unit Testing • http://blog.jetbrains.com/webide/2011/10/javascript-unit-testing-support/
  34. 34. Integration tools(11) • WebStorm • • Zen Coding with Emmet Javascript • • Support for CoffeeScript and TypeScript Editor • DOM-Based, Browser-Specific Completion
  35. 35. Integration tools(12) • WebStorm • CSS • Support for Sass, Less and Stylus
  36. 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. 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. 38. Integration tools(15) • LightTable • Python development IDE • • http://www.lighttable.com/ http://www.kickstarter.com/projects/ibdknox/light-table
  39. 39. Synchronized(1) • Remote Preview • https://github.com/viljamis/Remote-Preview • http://viljamis.com/blog/2012/remote-preview/
  40. 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. 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. 42. Synchronized(4) • Adobe Edge Inspect
  43. 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. 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. 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. 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. 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. 48. Simulate real-network conditions(2) • Slowy app • Real-world connection simulator and bandwidth limiter on Mac OS X • http://slowyapp.com/
  49. 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. 50. Live testing and Screenshots(2) • Open Device Lab(ODL)
  51. 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. 52. Live testing and Screenshots(4) • Sauce Labs
  53. 53. Live testing and Screenshots(5) • Sauce Labs
  54. 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. 55. Live testing and Screenshots(7) • BrowserStack
  56. 56. Live testing and Screenshots(8) • BrowserStack • Rapidly test website for cross browser compatibility
  57. 57. Live testing and Screenshots(9) • BrowserStack • Responsive Design Testing across Devices
  58. 58. Live testing and Screenshots(10) • Browserling • Cross Browser Testing • • https://browserling.com/ Tests on virtual machines
  59. 59. Live testing and Screenshots(11) • Browserling
  60. 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. 61. Reference • Automating Front-end Workflow • https://speakerdeck.com/addyosmani/automating-front-end-workflow
  62. 62. Thank you.

×