Vi använder Chrome DevTools som om

  1. Redigera snabbt HTML-element
  2. Expand alla barnelement
  3. Flyttning av inspektören
  4. DOM-elementsökning
  5. paletter
  6. Flera markörer
  7. Koda base64-bild
  8. Pseudoklassbyte
  9. Kolumn urval
  10. Kopiera begäran om cURL
  11. Skärmtangentbord
  12. Skärmdump av hela sidan
  13. Emulering av pekdon
  14. Användbara funktioner

Som namnet antyder är Chrome DevTools, eller webbinspektör, ett verktyg utformat för webbutvecklare och personer som är associerade med det. Web inspektören låter dig göra följande:

  • Kontrollera skärmens korrekthet.
  • Spåra utförandet av skript i JavaScript.
  • Visa nätverksaktiviteter.

När jag skrev den här artikeln använde jag Canary - version av Chrome, där nya funktioner testas, som sedan hamnar i en stabil version av Chrome.

För att starta inspektören kan du högerklicka var som helst på sidan och välja "Visa artikelnummer", du kan också bara trycka på Ctrl + Shift + C.

Redigera snabbt HTML-element

Låt oss börja med de enklaste: redigeringselementen.

Låt oss börja med de enklaste: redigeringselementen

Så här kontrollerar du:

  • Välj fliken Elements.
  • Välj något HTML-element i panelen.
  • Dubbelklicka på taggen och byt till exempel taggnamnet.

När redigeringen är klar uppdateras stängningskoden automatiskt.

Expand alla barnelement

Så här kontrollerar du:

  • Gå till panelen Elements.
  • Välj ett element och, samtidigt som du håller Alt, klicka på pilen till vänster om elementet.

Flyttning av inspektören

Inspektionspanelen kan tryckas både i botten av webbläsarfönstret och på dess högra sida. Platsen för panelen till höger är till exempel lämplig när du arbetar med widescreen-bildskärmar. Kontrollpanelen kan också placeras i ett separat fönster och överförs till exempel till en annan bildskärm.

Kontrollpanelen kan också placeras i ett separat fönster och överförs till exempel till en annan bildskärm

Så här kontrollerar du:

  • Ctrl + Skift + D - Växla plats

DOM-elementsökning

Förmodligen inte många för vilka detta kommer att bli en upptäckt, men på fliken "Elements" kan du söka av DOM.

Förmodligen inte många för vilka detta kommer att bli en upptäckt, men på fliken Elements kan du söka av DOM

Så här kontrollerar du:

  • Tryck Ctrl + F och skriv in den föreslagna sökfrågan.

paletter

Välj färg från paletten

Valet av färg i de senaste versionerna av Chrome har genomgått vissa ändringar: lägger till två paletter för att underlätta valet av färg.

Flera markörer

Flytta markören och, medan du håller Ctrl, klicka i önskat område för att lägga till en markör. Du kan ångra åtgärden med Ctrl + U. Personligen har jag aldrig varit användbar.

Koda base64-bild

Så här kontrollerar du:

  • Växla till nätverkspanelen.
  • Välj bild
  • Högerklicka på bilden och välj ""

Pseudoklassbyte

Pseudoklasserna återspeglar elementens tillstånd och deras relativa positioner.

Pseudoklasserna återspeglar elementens tillstånd och deras relativa positioner

Så här kontrollerar du:

  • Högerklicka på ett element i panelen Elements och välj en pseudoklass i listan över kraven för kraftelement.
  • Du kan också välja en pseudoklass på höger sida av panelen Elements.

Kolumn urval

Så här kontrollerar du:

  • Gå till panelen "Källor".
  • Välj vilken fil som helst.
  • Markera texten genom att hålla Alt.

Val av kolumn fungerar också när HTML redigeras i panelen Elements.

Kopiera begäran om cURL

Alla förfrågningar på fliken Nätverk kan kopieras och klistras sedan in i terminalen för körning med användning av curl.

Skärmtangentbord

Om Nexus 5X-profilen är vald kan du se hur webbplatsen ser ut när tangentbordet på skärmen är aktivt.

Chrome DevTools: skärmtangentbord Chrome DevTools: skärmtangentbord

Skärmdump av hela sidan

Ta en bild på hela sidan är väldigt enkel. Behöver bara ...

  1. Öppen inspektör
  2. Gå till konsolen.
  3. Tryck Ctrl + Skift + P
  4. Skriv "skärmdump"
  5. Välj "Capture full size screenshot"
Skärmdump av hela sidan

Emulering av pekdon

Du kan också simulera några sensorer:

  • Pekskärm
  • Koordinater för geolokalisering
  • accelerometer

Så här försöker du:

  • Välj panelen Elements.
  • Tryck på "Esc" och välj "Emulation> Sensors".

Användbara funktioner

nycklar och värden

Med tangenterna och värdesfunktionerna kan du skriva ut tangenterna eller värdena för objektet till konsolen. Med tangenterna och värdesfunktionerna kan du skriva ut tangenterna eller värdena för objektet till konsolen Visar tangenter och objektvärden separat

Новости

Социальные сети в России, зима 2015-2016 Цифры, тренды, прогнозы | Блог Brand Analуtics — все о бренд мониторинге и социальной аналитике
Представляем данные регулярного исследования активной аудитории социальных сетей в России, зима 2015-2016. В исследовании представлены данные по аудитории, возрасту, полу и региональному распределению

SMM маркетинг от А до Я
Развитие социальных сетей породило новую огромную бизнес отрасль — СММ маркетинг. Это когда мы приходим с нашим продуктом в какую-нибудь соцсеть, находим там нашу целевую аудиторию, и предлагаем ей наш

Полезно знать
20.02.2014 Что такое Pinterest. Визуальный PR и маркетинг Pinterest или ПИНТЕРЕСТ – социальная сеть, использующая вместо текстов картинки и изображения, которые можно добавлять в аккаунт,

Фейсбук Моя страница: ВХОД на свою страницу Facebook
Фейсбук (Facebook) Моя страница — это личная страница каждого зарегистрированного пользователя самой большой в мире социальной сети.  Фейсбук даёт возможность людям с разных уголков Земли общаться между

Анализ социальных сетей
АНАЛИЗ СОЦИАЛЬНЫХ СЕТЕЙ (social network analysis) - новое направление структурного подхода, основными целями которого являются исследование взаимодействий между социальными объектами и выявление условий

Социальные сети для продвижения бизнеса: какие выбрать?
  Привет, друзья! Социальные сети занимают львиную часть времени в нашей жизни. Ежедневный просмотр новостей, любимых групп и переписка с друзьями – это любимое дело большинства молодых людей. Вот и

ВРЕДНОЕ ВЛИЯНИЕ СОЦИАЛЬНЫХ СЕТЕЙ НА ЗДОРОВЬЕ ЧЕЛОВЕКА - VI Студенческий научный форум (15 февраля - 31 марта 2014 года)
ВРЕДНОЕ ВЛИЯНИЕ СОЦИАЛЬНЫХ СЕТЕЙ НА ЗДОРОВЬЕ ЧЕЛОВЕКА Гущина Н. В., Люлина Н.В. С распространением всемирной паутины рост социальных сетей по всему миру стал глобальным явлением. С каждым

Влияние социальных сетей на подростков. Пропаганда суицида в сетях
Почему мы любим интернет? Почему молодым людям, подросткам сказать «Привет» стало проще, познакомившись в интернете, чем просто подойти в реальности? Почему все «сидят» в социальных сетях? Социальные сети

Маркетинг в социальных сетях (SMM) для продвижения компании
Деятельность в социальных сетях, на блогах и форумах по повышению лояльности клиентов получила название SMM — от аббревиатуры английского звучания этого термина – Social Media Marketing. Аудитория

Фейсбук (Facebook) - что это за сеть: как пользоваться ФБ
Фейсбук — это самая популярная и большая социальная сеть в мире. Если Вам интересно узнать больше о Facebook, про то как пользоваться сетью и о некоторых «фишках» ФБ — этот материал именно для вас!