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

Mēs izmantojam Chrome DevTools kā tādu

  1. Ātri rediģējiet HTML elementus
  2. Izvērst visus bērnu elementus
  3. Inspektora pārvietošana
  4. DOM elementu meklēšana
  5. Paletes
  6. Vairāki kursori
  7. Kodēt bāzes64 attēlu
  8. Pseido klases maiņa
  9. Kolonnas izvēle
  10. Kopēt pieprasījumu par CURL
  11. Ekrāna tastatūra
  12. Visas lapas ekrānuzņēmums
  13. Skārienjutīgo ierīču emulācija
  14. Noderīgas funkcijas

Kā norāda nosaukums, Chrome DevTools vai tīmekļa inspektors ir rīks, kas paredzēts tīmekļa izstrādātājiem un ar to saistītajiem cilvēkiem. Tīmekļa inspektors ļauj jums veikt šādas darbības:

  • Pārbaudiet displeja pareizību.
  • Sekojiet skriptu izpildei JavaScript.
  • Skatīt tīkla darbības.

Rakstot šo rakstu es izmantoju Kanāriju sala - Chrome versija, kurā tiek pārbaudītas jaunas funkcijas, kas pēc tam ietilpst stabilā Chrome versijā.

Lai sāktu inspektoru, varat ar peles labo pogu noklikšķināt jebkurā vietā uz lapas un atlasīt "Skatīt vienuma kodu", jūs varat arī vienkārši nospiest Ctrl + Shift + C.

Ātri rediģējiet HTML elementus

Sāksim ar vienkāršākajiem: rediģēšanas elementiem.

Sāksim ar vienkāršākajiem: rediģēšanas elementiem

Kā pārbaudīt:

  • Atlasiet cilni Elements.
  • Atlasiet jebkuru paneļa iekšpusē esošo HTML elementu.
  • Veiciet dubultklikšķi uz taga un mainiet, piemēram, atzīmes nosaukumu.

Kad rediģēšana ir pabeigta, aizvēršanas atzīme tiks automātiski atjaunināta.

Izvērst visus bērnu elementus

Kā pārbaudīt:

  • Dodieties uz paneļa Elements.
  • Atlasiet elementu un, turot Alt, noklikšķiniet uz bultiņas, kas atrodas kreisajā pusē no elementa.

Inspektora pārvietošana

Inspektora paneli var nospiest gan pārlūkprogrammas loga apakšā, gan uz labo pusi. Piemēram, paneļa atrašanās vieta labajā pusē ir ērta, strādājot ar platekrāna monitoriem. Arī inspektoru paneli var ievietot atsevišķā logā un, piemēram, pārsūtīt uz citu monitoru.

Arī inspektoru paneli var ievietot atsevišķā logā un, piemēram, pārsūtīt uz citu monitoru

Kā pārbaudīt:

  • Ctrl + Shift + D - Pārslēgt atrašanās vietu

DOM elementu meklēšana

Iespējams, ne daudzi, kam tas būs atklājums, bet cilnē Elements jūs varat meklēt pēc DOM.

Iespējams, ne daudzi, kam tas būs atklājums, bet cilnē Elements jūs varat meklēt pēc DOM

Kā pārbaudīt:

  • Nospiediet Ctrl + F un ievadiet piedāvāto meklēšanas vaicājumu.

Paletes

Izvēlieties krāsu no paletes

Krāsu izvēle jaunākajās Chrome versijās ir mainījusies: pievienotas divas paletes, lai atvieglotu krāsu izvēli.

Vairāki kursori

Pārvietojiet kursoru un, turot Ctrl, nospiediet vēlamajā apgabalā, lai pievienotu kursoru. Darbību var atsaukt, izmantojot Ctrl + U. Personīgi es nekad neesmu bijis noderīgs.

Kodēt bāzes64 attēlu

Kā pārbaudīt:

  • Pārslēgties uz tīkla paneli.
  • Atlasiet attēlu
  • Ar peles labo pogu noklikšķiniet uz attēla un atlasiet ""

Pseido klases maiņa

Pseido klases atspoguļo elementu stāvokli un to relatīvās pozīcijas.

Pseido klases atspoguļo elementu stāvokli un to relatīvās pozīcijas

Kā pārbaudīt:

  • Ar peles labo pogu noklikšķiniet uz elementa paneļa elementi un atlasiet pseidogrupu Force Element valsts sarakstā.
  • Varat arī izvēlēties pseido klasi paneļa Elements labajā pusē.

Kolonnas izvēle

Kā pārbaudīt:

  • Dodieties uz paneli "Avoti".
  • Atlasiet jebkuru failu.
  • Iezīmējiet tekstu, turot Alt.

Izvēloties kolonnu, darbojas arī HTML rediģēšana elementu panelī.

Kopēt pieprasījumu par CURL

Jebkuru pieprasījumu cilnē Tīkls var kopēt un pēc tam ielīmēt terminālī, lai to izpildītu, izmantojot čokurošanās.

Ekrāna tastatūra

Ja ir izvēlēts Nexus 5X profils, varat redzēt, kā vietne izskatās, kad ekrāna tastatūra ir aktīva.

Chrome DevTools: ekrāna tastatūra Chrome DevTools: ekrāna tastatūra

Visas lapas ekrānuzņēmums

Fotografējiet visu lapu ir ļoti vienkārša. Tikai nepieciešams ...

  1. Atvērt inspektors.
  2. Dodieties uz konsoli.
  3. Nospiediet Ctrl + Shift + P
  4. Ierakstiet "screenshot"
  5. Atlasiet "Capture full size screenshot"
Visas lapas ekrānuzņēmums

Skārienjutīgo ierīču emulācija

Varat arī simulēt dažus sensorus:

  • Skārienekrāns
  • Ģeogrāfiskās atrašanās vietas koordinātas
  • Akselerometrs

Kā izmēģināt:

  • Atlasiet paneli Elements.
  • Nospiediet "Esc" un izvēlieties "Emulation> Sensors".

Noderīgas funkcijas

taustiņus un vērtības

Taustiņu un vērtību funkcijas ļauj izvadīt objektu atslēgas vai vērtības konsolei. Taustiņu un vērtību funkcijas ļauj izvadīt objektu atslēgas vai vērtības konsolei Atslēgu un objektu vērtību rādīšana atsevišķi

Новости
Провайдеры:
  • 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 Гбит / сек... 
    Читать полностью