Du har kanskje hørt om denne kraftige funksjonen i Chrome-nettleseren din - Chrome-utviklingsverktøy. Og selv om det er sant, at det meste er nyttig for nettutviklere, er det tidspunkter når det er nyttig for en gjennomsnittlig internettbruker. I denne artikkelen vil vi fokusere på nyttige ting du kan gjøre med Chrome-utviklerverktøy. Som hvordan du kan omgå restriksjoner satt av nettstedet, finne ut skrifter, farger og bilder som er skjult på overflaten eller til og med glemt passord.
Hvordan åpne utviklerverktøy i Chrome?
For å åpne Chrome-utviklerverktøy i Google Chrome, klikk på Tilpass krom (⋮)>Flere verktøy -> Utviklerverktøy.Du kan ogsåHøyreklikk på siden du vil redigere og velgeUndersøke. Jeg liker å bruke tastaturet kortCtrl + Shift + I(Cmd + Option + I for Mac).
Som standard åpner det et nytt vindu til høyre, men jeg foretrekker å holde det i bunnen, da det gir meg mer plass til å utvide det. For å flytte vinduet til bunnen, klikk på de tre vertikale prikknappene øverst til høyre (⋮) og velg deretter det nederste dokkingsalternativet. Du kan også slå påmørk modus fra Innstillinger, gjør det lettere for øynene. Nå neste gang inspeksjonselementet åpnes, husker det endringene mine.
Les også:Hvordan endre Google Chrome bakgrunn
10 tips for Chrome-utviklerverktøy
1. Rediger en webside
Dette er den mest grunnleggende bruken av utviklerverktøyene, men må inkluderes. Du kan midlertidig redigere en hvilken som helst webside (som Wikipedia) i nettleseren din. For å gjøre dette, åpne hvilken som helst webside du vil redigere på Chrome, og høyreklikk og velg Inspiser element. Gå til konsollfanen (burde være det andre alternativet fra toppen), lim deretter inn neste kodelinje og trykk enter.
document.body.contentEditable = sant
Dette vil gjøre hele websiden redigerbar som ethvert Word-dokument. Bare klikk hvor som helst og begynn å skrive. Selv om du husker, vil alle effektene være borte når du oppdaterer siden. Så sørg for at du skjermbilder siden før du lukker nettleseren.
2. Avslør det lagrede passordet
Si at du vil logge på Instagram på mobilen din, men at du ikke husker passordet. Heldigvis har du den lagret i nettleseren din. Nå, i stedet for å gå gjennom den møysommelige prosessen med tilbakestilling av passord, kan du bruke utviklerverktøy for å avsløre det skjulte passordet.
Høyreklikk passordfeltet og velg deretter “Inspisér element.”Dette åpner dokumentinspektørvinduet, og alt du trenger å gjøre er å erstatte ordet“passord”Med“tekst”Ipassordtypeinntastingsfelt. Og dette skal avsløre passordet skjult i stjerner.
3. Ta et skjermbilde av websiden
Visste du at du kan ta et skjermbilde av websiden ved hjelp av Chome Dev Tools uten å bruke noen ekstra plugin? Funksjonen er ganske enkel og tilbyr bare to innstillinger, den synlige delen av websiden, hele websiden. Det kan fange skjermbilder for mobilversjonen av websiden, og du kan velge noen få mobile oppsett fra rullegardinmenyen på toppen.
For å fange skjermbildet, åpne Chrome utviklerverktøy. Gå til konsollfanen, og trykk påctrl + skift + M(vinduer) ellercmd + opt + M(Mac). Klikk deretter på3 prikkemeny øverst til høyrepå websiden og velgCapture Screenshot eller Capture Screenshot i full størrelse. Og det er det, skjermbildet ditt lagres i nedlastingsmappen.
Les også:De 7 beste Chrome-skjermutvidelsene for alle behov
Det er andre måter å ta skjermbilder på, og du kan alltid installere en skjermbildeutvidelse eller bruke datamaskinens innebygde skjermbilde-snarvei, prtsc (windows) og cmd + shift + 4 (MacOS), men denne metoden fungerer like bra.
4. Bruk fargevelgeren
Jeg er en suger for minimale farger, og oftere enn ikke, jeg blar minimale bilder på Google for å få inspirasjon til bilder og miniatyrbilder. Eller si, hvis fargevalget på et bestemt nettsted som fanger blikket ditt, og ønsker å finne ut hvilken farge de bruker, kan du alltid installere en utvidelse av fargevalg. Men det er en raskere måte å gjøre det på.
Ta opp Chrome Development-verktøyene, og klikk på venstre sideStil klikk på den lille boksen ved siden av fargen. Dette vil ta opp FargevelgerverktøyKlikk nå hvor som helst på websiden, hvis farge du vil finne ut, og fargevelgeren vil gi deg heksekoden. Bare kopier hexkoden og lim den inn i Photoshop.
5. Bytt nettsted til mobiloppsett
5. Bytt nettsted til mobiloppsettNår du åpner et nettsted, sendes mye av dataene dine under panseret, som IP-adressen din, nøyaktig dato og klokkeslett, URL, hvor kommer du fra og brukeragenten.
Brukeragenten hjelper nettstedet med å identifisere nettleseren din. Og i noen tilfeller hjelper det å endre brukeragenten. For eksempel hvis du vil sjekke om nettstedet ditt er responsivt eller ikke. Men min favoritt er å få tilgang til den forskjellige versjonen av nettstedet. For eksempel åpner noen offentlige nettsteder i India bare i Internet Explorer, eller for et globalt eksempel, la oss ta Instagram. Som du vet, kan du ikke laste opp bilder til Instagram han på datamaskinen, men du kan gjøre det fra mobilnettstedet. Så hvorfor ikke maskerte desktop-nettleseren til den for mobil?
For å gjøre dette, fyr opp Chrome Development-verktøyene,Klikk på 3 vertikale prikker, og under merVerktøy å velgeNettverksforhold. Derfjern merket boksen som sier,Brukeragent, velg automatisk og velg a fra popup-boksenMobil nettleser. Hvis du prøver å få tilgang til et offentlig nettsted, velger du en annen kompatibel nettleser. Lukk nå vinduet og oppdater siden. Som du kan se, er det en fullt funksjonell opplastingsknapp, som du kan bruke til å laste opp bilder til Instagram fra datamaskinen.
6. Søk hva som helst
En annen nyttig funksjon som er vanskelig å finne ut er søket. I kategorien "Søk" kan du søke på et nettsted etter spesifikt innhold eller et HTML-element.
Si for eksempel at hvis du vil vite hvilken skrift et nettsted bruker, må du klikke på3 prikker klikk deretterSøk og skriv inn font eller for å være presisfont-familie,og du kan finne informasjonen i kodelinjene.
Eller la oss ta et annet eksempel. Jeg snubler over et nettsted som bruker en video i bakgrunnen, og jeg er nysgjerrig på å finne ut hvilken video det er akkurat. Lagring av siden fungerer ikke nå. Bruk i stedet verktøyet Chrome Development, og søk etter“Video”bla gjennom resultatene og se om du får noen URL. Bruk i så fall sunn fornuft, hvis det er en videofil, har det mest som en utvidelse avmp4, prøv det. Og der går du, nå har du et par resultater med mp4, en av det skal være videofilen, klikk på den for å få opp URL-en. Kopier nettadressen og lim inn i nettleseren, så går du av.
7. Fjern popup-vinduer
En annen nyttig funksjon i er å fjerne popup-vinduer fra nettstedet. La oss for eksempel ta Quora - et populært spørsmålssvarnettsted som kun tilbyr innhold til medlemmene. Hvis du kommer til dette nettstedet fra Google og prøver å lese mer enn én side, vil det vises en popup som ber deg om å registrere deg. Slik fjerner du det, høyreklikker på siden og tar opp Inspect-elementene.Flytt markøren til kodelinjen til popup-vindu (som dekker innholdet) blir uthevet. Når du er ferdig,slett den linjen med kode. Noen ganger er det et annet gjennomsiktig lag på sidens kropp, som gjør at koblingene ikke svarer. Slett det også.
Lese:Hvordan se blokkert innhold på nettsteder
8. Endre nettleserens GPS-posisjon
Nå er det to måter, ethvert nettsted finner ut hvor du surfer fra - IP-adressen din og nettleserens plassering. Selv om du enkelt kan endre IP-adressen, ved å bruke VPN og Smart DNS, er det ikke lett å endre nettleserens plassering.
For eksempel, her om dagen, surfer jeg på CBS med VPN, og alt fungerte bra. Men da jeg bestemte meg for å se lokale kanaler på CBS, og det viste meg en popup som ba om nettleserplasseringen min. Og klikk deretter på Tillat, det står at innholdet ikke er tilgjengelig der jeg er.
For å fikse det, åpneUtviklerkonsoll, ved å høyreklikke på skjermen. Nederst på panelet,trykk på trepunktsknappen øverst til høyre, og klikk deretter på “Sensorer”Alternativ fraMer. Et nytt vindu åpnes i den nederste halvdelen av utviklerverktøyvinduet, UnderGeolokalisering, å velge "Egendefinert beliggenhet.”Sett inn posisjonen din basert på bredde og lengdegrad. Hvis du ikke kjenner disse verdiene, kan du alltid bruke Google maps. Eller bare velg navnet på byen somCalifornia. Last siden på nytt, tillat plasseringsdata i popup-vinduet. Og nå, hvis jeg oppdaterer siden og klikker på tillat plassering, som du kan se, kan jeg nå streame lokale stasjoner.
9. Bruk linjal
Akkurat som et Color Picker-verktøy, inkluderer Google Chrome Developer Tools også en linjal. Dette kommer i hånden når du vil måle piksler på tvers av høyden og bredden på siden.
For å få opp linjalen, høyreklikk på siden der du vil bruke linjal og klikk “Inspisér element”. Deretter må du aktivere det for første gang, klikk på de 3 vertikale punktene øverst til høyre ogInnstillinger.Et nytt vindu åpnes underElementer seksjon velg Vis linjal alternativ.
10. Begrens nedlastningshastigheten på Chrome
Hvis du vil begrense nedlastingshastigheten, kan du gjøre det med Chrome Dev-verktøy. Det begrenser ikke bare nedlastingshastigheten til faktiske pakker, men også streaming. I utgangspunktet kan du isolere en fane og gjøre at fanen lastes i henhold til hastigheten du nettopp har angitt. Det fungerer som en sjarm når du vil begrense båndbredden i nettleseren din mens du ser på en film.
For å stille inn hastigheten for en fane, gå til alternativene for utviklere, og klikk på alternativknappen rett ved siden av revisjon og velg innstillinger, eller du kan bare trykke F1-tasten direkte til åpne innstillingene. Gå til Throttling-fanen og klikk ‘Legg til tilpasset profil ’. Du kan navngi profilen og angi nedlastings- og opplastningshastighet. Når du har lagt til figurene, klikker du på ‘Legg til’, og du er ferdig.
Denne profilen vil bare fungere på den nåværende åpne fanen, og du må holde utvikleralternativvinduet aktivt, ellers vil strupingen ikke fungere. For å aktivere profilen, gå til nettverksfanen i utviklerverktøy og klikk på rullegardinmenyen rett ved siden av Frakoblet. Velg den tilpassede profilen og siden din er nå strupet. Alt som er lastet ned fra denne siden vil bli strupet til den angitte grensen. Bare vær sikker på at du ikke lukker inspeksjonselementvinduet eller oppdaterer siden.
Hvordan bruker du Chrome Developer-verktøyet?
Samlet sett har utviklerverktøyene flere brukssaker enn å rote med favorittnettstedene dine. Kort sagt, alt som nettstedet ikke gjør på serversiden kan endres med Chrome-utviklerverktøy. Alternativt kan du bruke Web Developer-utvidelsen for å få tilgang med ett klikk til alle funksjonene og mer.
