Google Chrome

 Compartiu 

Chrome Developer Tools

Chrome Developer Tools aka Chrome Dev Tools. Hi podeu accedir prement F12

• https://developers.google.com/web/tools/chrome-devtools/

Petits trucs en videos curts

• https://umaar.com/dev-tips/
• https://medium.com/dev-channel/increase-your-web-development-skill-set-150-animated-tips-on-chrome-devtools-4a30155e6b8e

CSS Coverage

CSS Coverage

Responsive i mobile

• Es poden escollir múltiples mòbils i es pot activar veure el frame (veure el mòbil per exemple Iphone)
• ES poden fer captures de pantalla amb el frame del mòbil inclòs
• https://developers.google.com/web/tools/chrome-devtools/device-mode/emulate-mobile-viewports

Depurar

https://developers.google.com/web/tools/chrome-devtools/javascript/

Workspaces

https://developers.google.com/web/tools/setup/setup-workflow

Source maps

El problema sovint d'afegir breakpoints és que actualment amb el ús de Module Bundlers, minifiers, transpilers i similars és complicat torbar el codi que volem depurar a la pestanya sources.

Proveu de depurar codi JAvascript de Laravel creat amb Laravel mix amb i sense els source maps activat (PER DEFECTE NO ESTÀ ACTIVAT):

mix.js('resources/assets/js/app.js', 'public/js').sourceMaps();

Amb vue-cli webpack està configurat per defecte amb sourceMaps

Laravel Mix:

• https://laravel.com/docs/5.6/mix#css-source-maps

Resources:

• https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/
• https://webpack.js.org/configuration/devtool/

Remote debugging

Habilitar la depuración mediante USB:

• Depèn de cada mòbil
• Settings > About phone y toca Build number siete veces
• SAmsung Galaxy J3: https://www.youtube.com/watch?v=vjnfjk6MqUI

https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

Console

Comandes:

• values i keys per depurar objectes
• dir, dirxml, inpsect(object)
• $_ i $0, $1 etc són referències als últims objectes monitoritzats
• Selectors CSS $(selector)
• Monitor(fn) i MonitorEvents(fn) per monitortizar funcions
• Diferents nivell de log (console.log, warning etc)
• https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference

Funcionalitats

Remote devices

TODO

Progressive web apps

Vegeu Progressive Web Apps

Snippets

• https://bgrins.github.io/devtools-snippets/https://developer.chrome.com/devtools/docs/authoring-development-workflow#snippets
• https://bgrins.github.io/devtools-snippets/

Vegeu també

• Chrome
• Browsers
• Snippets

Enllaços externs

• https://developers.google.com/web/tools/chrome-devtools/