Your SlideShare is downloading. ×
Web dev tools review
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web dev tools review

3,635
views

Published on

Published in: Technology, Design

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,635
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
28
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×