Google Chrome DevTools: Mindre kjente verktøy for utviklere

Google Chrome DevTools er en del av Google Developers-produktene og inneholder mange kraftige verktøy. Delene om tips og triks for Google-utviklere Chrome DevTools inneholder noen av de mindre kjente verktøyene, organisert i de ni emnene som inkluderer konsoll, tidslinje, profiler, kilder, elementer, nettverk, innstillinger, generelle og tilleggsverktøy. Jeg vil trekke frem noen få tips og triks som skiller seg ut for meg, og er en eiendel i Google-verktøyet mitt. Følgende tips blir fremhevet som brukt i Google Chrome-nettleseren.

Console

Snarveien for å starte nettsider i inspeksjonselement-modus bruker Ctrl + Shift + C-kombinasjonen (eller Cmd + Shift + C-kombinasjonen for Mac OS). Åpne Chrome DevTools i inspeksjonselementet slik at du kan undersøke den gjeldende siden med en gang. En prøveinspeksjonskonsoll vises nedenfor i figur B.


Bli en tastaturninja ved å bruke Shift +? kombinasjon for å se alle støttede snarveier i en praktisk rute. Snarveiene vises i figur C :


Tidslinje

Del og analyser en tidslinje med andre nettutviklere for å analysere nyttige data om hendelser, maling, beregningsstil og mer. Bare bruk Ctrl + E-kombinasjonen eller Cmd + E for Mac for å starte og stoppe tidslinjeopptaket, tastekombinasjonen fungerer som start og stopp-veksling. Deretter kan du høyreklikke hvor som helst inne i tidslinjen og velge Lagre tidslinjedata ... som lar deg lagre JSON-filen i den valgte katalogen, som vist i figur D :


kilder

Pretty Print JavaScript lar deg ta minifisert JavaScript fra en webside og konvertere det til en mer lesbar form.

  1. I Dev-verktøyene velger du Kilder-panelet og velger deretter skriptet du vil konvertere.

  2. Deretter trykker du på Pretty print-knappen {} fra bunnen av DevTools-vinduet, som vist i figur E :


  3. Det minifiserte skriptet ditt er nå klart til å se eller skrive ut i et lesbart format som vist i figur F :

innstillinger

Dock-til-høyre for feilsøking av viewport kan være nyttig for å se sider på enheter med mindre skjermer eller se på porter, og fullføres enkelt ved å holde inne bryterikonet et øyeblikk og deretter velge det øverste ikonet som vist i figur G :


Når det er valgt, endres visningsområdet som vist i figur H :


Andre ressurser

Valgte ekstra ressurser som fremhever flere av de andre mindre kjente funksjonalitetene i Google Chrome DevTools er inkludert nedenfor:

  • Google I / O 2013 - Chrome DevTools Revolutions 2013 (Video)

  • Anti-Code.com Chrome DevTools Cheat ark

  • Igvita.com-presentasjon - Vent, DevTools kan gjøre DET?

  • Google Developers - Bli en JavaScript-konsoll Power-User (Video)

  • Google Developers - Google Chrome Developer Tools: 12 triks for å utvikle raskere (video)


© Copyright 2020 | mobilegn.com