• Главная
  • Карта сайта
Не найдено

Koristimo Chrome DevTools kao o tome

  1. Brzo uređivanje HTML elemenata
  2. Proširite sve podređene elemente
  3. Premještanje inspektora
  4. Pretraživanje DOM elementa
  5. palete
  6. Više pokazivača
  7. Kodiraj base64 sliku
  8. Pseudo-klasa prebacivanje
  9. Odabir stupca
  10. Kopirajte zahtjev za cURL
  11. Zaslonska tipkovnica
  12. Snimak zaslona cijele stranice
  13. Emulacija dodirnih uređaja
  14. Korisne značajke

Kao što naziv implicira, Chrome DevTools ili web-inspektor alat je dizajniran za web-programere i osobe povezane s njim. Web inspektor vam omogućuje sljedeće:

  • Provjerite ispravnost zaslona.
  • Pratite izvršavanje skripti u JavaScriptu.
  • Prikaz mrežnih aktivnosti.

Prilikom pisanja ovog članka koristio sam Kanari - verzija Chromea, gdje se testiraju nove značajke, koje zatim spadaju u stabilnu verziju preglednika Chrome.

Da biste pokrenuli inspektora, možete kliknuti bilo gdje na stranici desnom tipkom miša i odabrati "Prikaži kôd stavke", možete pritisnuti i Ctrl + Shift + C.

Brzo uređivanje HTML elemenata

Počnimo s najjednostavnijim: uređivačkim elementima.

Počnimo s najjednostavnijim: uređivačkim elementima

Kako provjeriti:

  • Odaberite karticu "Elementi".
  • Odaberite bilo koji HTML element unutar ploče.
  • Dvaput kliknite na oznaku i promijenite, primjerice, naziv oznake.

Kada se uređivanje završi, završna se oznaka automatski ažurira.

Proširite sve podređene elemente

Kako provjeriti:

  • Idite na ploču Elements.
  • Odaberite element i držeći Alt, kliknite strelicu s lijeve strane elementa.

Premještanje inspektora

Panel inspektora može se pritisnuti i na dno prozora preglednika i na njegovu desnu stranu. Na primjer, položaj ploče s desne strane prikladan je za rad na monitorima sa širokim zaslonom. Također, panel inspektora može se smjestiti u poseban prozor i, na primjer, prenijeti na drugi monitor.

Također, panel inspektora može se smjestiti u poseban prozor i, na primjer, prenijeti na drugi monitor

Kako provjeriti:

  • Ctrl + Shift + D - Prebaci lokaciju

Pretraživanje DOM elementa

Vjerojatno ne mnogi za koje će ovo biti otkriće, ali u kartici "Elementi" možete pretraživati ​​po DOM-u.

Vjerojatno ne mnogi za koje će ovo biti otkriće, ali u kartici Elementi možete pretraživati ​​po DOM-u

Kako provjeriti:

  • Pritisnite Ctrl + F i unesite predloženi upit za pretraživanje.

palete

Odaberite boju iz palete

Izbor boje u novijim verzijama Chromea doživio je neke promjene: dodane su dvije palete kako bi se olakšao izbor boje.

Više pokazivača

Pomaknite pokazivač i, držeći Ctrl, kliknite na željeno područje da biste dodali pokazivač. Akciju možete poništiti pomoću Ctrl + U. Osobno nikada nisam bio koristan.

Kodiraj base64 sliku

Kako provjeriti:

  • Prebacite se na ploču Mreža.
  • Odaberite sliku
  • Desnom tipkom miša kliknite sliku i odaberite ""

Pseudo-klasa prebacivanje

Pseudo-klasa odražava stanje elemenata i njihove relativne položaje.

Pseudo-klasa odražava stanje elemenata i njihove relativne položaje

Kako provjeriti:

  • Desnom tipkom miša kliknite element na ploči Elementi i odaberite pseudo-klasu na popisu Force Element State.
  • Također možete odabrati pseudo-klasu na desnoj strani panela Elements.

Odabir stupca

Kako provjeriti:

  • Idite na ploču "Izvori".
  • Odaberite bilo koju datoteku.
  • Označite tekst držeći Alt.

Odabir stupca radi i kada se HTML uređuje na ploči Elementi.

Kopirajte zahtjev za cURL

Svaki zahtjev na kartici Mreža može se kopirati i zatim zalijepiti u terminal za izvršavanje pomoću uvijanja.

Zaslonska tipkovnica

Ako je odabran profil Nexus 5X, možete vidjeti kako izgleda web-lokacija kada je zaslonska tipkovnica aktivna.

Chrome DevTools: zaslonska tipkovnica Chrome DevTools: zaslonska tipkovnica

Snimak zaslona cijele stranice

Snimite cijelu stranicu vrlo jednostavno. Samo trebate ...

  1. Otvori inspektora.
  2. Idite na konzolu.
  3. Pritisnite Ctrl + Shift + P
  4. Upišite "snimku zaslona"
  5. Odaberite "Snimanje snimke zaslona pune veličine"
Snimak zaslona cijele stranice

Emulacija dodirnih uređaja

Također možete simulirati neke senzore:

  • Zaslon osjetljiv na dodir
  • Koordinate za geolokaciju
  • brzinomjer

Kako isprobati:

  • Odaberite panel Elementi.
  • Pritisnite "Esc" i odaberite "Emulation> Sensors".

Korisne značajke

ključevi i vrijednosti

Funkcije tipki i vrijednosti omogućuju vam da na konzolu izvezete ključeve ili vrijednosti objekta. Funkcije tipki i vrijednosti omogućuju vam da na konzolu izvezete ključeve ili vrijednosti objekta Prikaz pojedinačnih vrijednosti tipki i vrijednosti objekta

Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью