Chrome Developer Tools



Hadji Kouceyla 

  • Master en IA (USTHB-2011)
  • Consultant / Formateur Web 
  • Intervenant, coach à plusieurs Events
  • Skills: HTML5/CSS3, PHP/Mysql,
    JS/jQuery, Json/Ajax, Web Responsive,
    Joomla, WordPress, Git




Web Developer?




 Your favorite browser ?




How to debug ?




Who did not understand 

my question?



you are not a 

web programmer




What's chrome dev tools ?

Authoring & development workflow


  • Drag-To-Right For Quicker Dock-Positioning
  • Search, Replace, Navigate And Filter
  • Live Editing Scripts & Styles
  • Save AS
  • Custom JavaScript Snippets

Editing styles & DOM


  • DOM Elements Tree
  • CSS Styles 
  • Box Model
  • Properties

Managing application storage


  • IndexedDB
  • Web SQL
  • Cookies
  • Local and session storage                                                
  • Application Cache

Evaluating network performance


  • Network panel overview
    • Preserving the network log upon navigation
    • Adding and removing table columns
    • Changing resource row sizes
    • Timeline view, Sorting and filtering
    • Saving and copying network information
  • Network resource details
    • HTTP headers, HTTP response
    • Resource previews
    • Cookies
    • Resource network timing

Debugging JavaScript


  • The Sources Panel
  • Debugging With Breakpoints
  • Pause on Next JavaScript Statement
  • Breakpoints on JavaScript Event Listeners

Using the Console


  • Basic operation
  • Using the Console API
  • Grouping output
  • Selecting elements
  • Measuring how long something takes
  • Accessing recently selected elements and objects

Mobile emulation


  • Emulating Touch Events
  • Emulating Device Viewports
  • Useragent Spoofing
  • Network Bandwidth Throttling
  • Geolocation Overrides
  • Device Orientation Overrides
  • CSS Media Type Emulation
  • Frequently Asked Questions



NEED MORE ?




 Of course Yes  

ALSO

  • JavaScript Memory Profiling
  • Profiling JavaScript performance
  • Working with CSS Preprocessors
  • Sample DevTools Extensions ()
  • Remote Debugging on Android

REFERENCE


  • https://developers.google.com/chrome-developer-tools
  • User experience 


THANK YOUUUUUUUU 

Made with Slides.com