Web Dev Tools Review

leechwin1@gmail.com

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

• 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/

// Start up a new local server $server // $python -m SimpleHTTPServer ...

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.