Web Dev Tools Review
2013. 11
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 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-a- mac-dev-machine-from-zero-to-hero-with-dotfiles/ Terminal • iTerm 2 • iTerm 2 is a terminal emulator for Mac OS X • http://www.iterm2.com • Autocomplete Past History
• Replay 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 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/
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.macosxautomation.com/automator/
Editor(2) • Emmet (Zen Coding) • Sublime plugin to Emmet (Zen Coding) • HTML, CSS • http://emmet.io/ • Github: https://github.com/sergeche/emmet-sublime
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
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://github.com/SublimeLinter/SublimeLinter
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/
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
Chrome DevTools(3) • CSS Pretty-printing • Support CSS • https://developers.google.com/chrome-developer-tools/docs/css-preprocessors
Chrome DevTools(4) • Ignoring library code • Ignoring library code while debugging in Chrome • http://www.divshot.com/blog/tips-and-tricks/ignoring-library-code-while- debugging-in-chrome/
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/devtools- terminal/leakmhneaibbdapdoienlkifomjceknl
Chrome DevTools(6) • Debugging • https://developers.google.com/chrome-developer-tools/docs/remote- debugging • Remote Debugging • USB Debugging • Etc • iOS WebKit Debug Proxy: https://github.com/google/ios-webkit-debug-proxy
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
Chrome DevTools(8) • Emulation • Emulating Device Viewports • Emulate and debug mobile viewport issues like CSS media query breakpoints for various devices and setting
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
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
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/
Integration tools(1) • Sublime Web Inspector • Debugger. Breakpoints. Console. Evaluate call frames • Sublime plugin to debug • http://sokolovstas.github.io/SublimeWebInspector/
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/
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 Integration tools(4) • Tailor • Brackets + Git for ChromeOS Integration tools(5) • WebStorm • The JavaScript IDE • http://www.jetbrains.com/webstorm/ • Live Edit with Chrome(Chrome extension)
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 responses. • http://blog.jetbrains.com/webide/2013/02/using-the-rest-client-within-phpstorm/
Integration tools(10) • WebStorm • JavaScript Unit Testing • http://blog.jetbrains.com/webide/2011/10/javascript-unit-testing-support/
Integration tools(11) • WebStorm • Zen Coding with Emmet • Javascript • Support for CoffeeScript and TypeScript • Editor • DOM-Based, Browser-Specific Completion
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 shows a popup displaying • When invoked on an image file reference then image preview
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
Integration tools(15) • LightTable • Python development IDE • http://www.lighttable.com/ • http://www.kickstarter.com/projects/ibdknox/light-table Synchronized(1) • Remote Preview • https://github.com/viljamis/Remote-Preview • http://viljamis.com/blog/2012/remote-preview/ Synchronized(2) • Remote Preview • Remote Device: Connected for Service URL(Remote Preview Project) • Polling URLs (url: url.txt) • Change to iframe src attribute Synchronized(3) • Adobe Edge Inspect • Chrome browser will get mirrored to the devices • http://html.adobe.com/edge/inspect/ • http://www.adobe.com/inspire/2012/12/web-designs-edge-inspect.html • http://tv.adobe.com/watch/adobe-evangelists-paul-trani/introducing-adobe-edge- inspect/ • Setting up Edge Inspect with network • 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
Synchronized(4) • Adobe Edge Inspect 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
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
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
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
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
Simulate real-network conditions(2) • Slowy app • Real-world connection simulator and bandwidth limiter on Mac OS X • http://slowyapp.com/ 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
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 storage and tested in Sauce Labs' cloud 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 virtual machines and devices. • Support screenshot and responsive test(Free) • Support live debugging 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 machines
Live testing and Screenshots(11) • Browserling
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/ Reference • Automating Front-end Workflow • https://speakerdeck.com/addyosmani/automating-front-end-workflow
Thank you.