Web dev tools review
7 likes4,958 views
This document reviews various web development tools, including: - Command line tools for scripting tasks and setting terminal environments. - Text editors like Sublime Text along with plugins for tasks like autoprefixing CSS and JavaScript linting. - Chrome DevTools and its emulator for testing across devices/networks. - Integration tools that link editors to browsers for live editing and debugging like WebStorm. - Synchronization options for previewing on remote devices like Adobe Edge Inspect. - Visual regression testing with Wraith and PhantomCSS. - Services for cross-browser testing across devices like Sauce Labs and BrowserStack.
Web dev tools review
- 1. Web Dev Tools Review [email protected] 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)
- 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
- 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
- 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/
- 62. Thank you.