Бесплатные уроки по инструменту Chrome Developers Tool

Заметка: Chrome Developers Tool (Инструменты разработчика) - это инструмент (наподобие Firebug в Firefox), который автоматически встроен в браузер Google Chrome. Его можно запустить, отправившись в Настройки (значок в правом верхнем углу) - Инструменты - Инструменты разработчика.

Chrome Developers Tool - это очень полезный инструмент, особенно когда дело касается отладки веб сайтов. Бьюсь об заклад, что все, кто пользуется данным инструментом действуют в большей степени интуитивно, однако для новичков хороший обучающий материал был бы очень полезен. И вот, наконец, такой материал появился: бесплатные видео уроки под названием “Explore and Master Chrome DevTools”. Для того, чтоб что-то понять, вам нужно хоть как-то владеть английским языком.

Code School

Code School - это новый сайт, где вы, не отходя от своего браузера, можете смотреть как платные, так и бесплатные видео курсы. Каждый курс состоит из нескольких видео уроков, после просмотра которых вас ждут интерактивные тесты для проверки полученных знаний. Все результаты выливаются в хорошо сформированную статистику.

Курс по Chrome Developers Tools

Данный курс финансировался самой компанией Google, он абсолютно бесплатен, доступен для всех желающих. Лично мне кажется, что все, кто пользуются данным инструментом, должны поблагодарить Google и посмотреть данный видео курс для того, чтобы узнать о срытых возможностях Chrome Developers Tools.

Длительность данного курса составляет 51 минуту. Потратив это короткое время, вы можете многому научиться. Также, после каждого урока можно проверить себя, пройдя тест, или перейти к просмотру следующей части.

К тому же, для просмотра данного курса не нужно ни на что подписываться или регистрироваться. Заходим и смотрим. Однако, если вы хотите видеть свою статистику, то вам придётся завести свой аккаунт.

В добавок ко всему этому, весь видео материал данного курса доступен для скачивания как в обычном, так и в HD качестве.

Курс “Explore and Master Chrome DevTools” состоит из 8 частей, которые затрагивают следующие темы:

  • Уровень 1. Вступление & основы DOM и стилей
  • Уровень 2. DOM и стили (более углублённо)
  • Уровень 3. Работа с консолью
  • Уровень 4. Отладка JavaScript
  • Уровень 5. Сеть
  • Уровень 6. Улучшение производительности
  • Уровень 7. Профилирование памяти

В общем, безусловно выбор за вами, смотреть данный курс или нет. На всё про всё у вас уйдёт не более двух часов, однако пользы от этого может быть очень даже много!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.noupe.com/tutorial/mandatory-for-web-developers-free-video-tutorials-on-chrome-devtools-by-code-school-75663.html
Перевел: Станислав Протасевич
Урок создан: 4 Апреля 2013
Просмотров: 40597
Правила перепечатки

5 последних уроков рубрики "Разное"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 4 Апреля 2013 12:29
    dagdush
    Не знаю возможно предвзятое мнение, но как по мне удобнее Firebug(при его тупняках и прочих лагах) пока нет. В хроме бесит авто подстановка которая работает в алфавитном порядке(ну и еще ряд вещей). FireBug - основной инструмент которым я пользуюсь в работе. Только из-за этого до сих пор юзаю FireFox. Пробовал ставить FireBug для Chrome но он на столько уныл что отказался от этой затеи. Возможно дело в привычке, но некоторые подходы команды Google применяемые в Chrome Developers Tool мне не нравятся. Хотя для новичков наверное посоветую учится работать именно в Chrome Developers Tool
    • 4 Апреля 2013 13:01
      stas.protasevich
      Честно говоря, раньше не представлял свою работу без Firebug и первое дело противился Chrome Dev Tool. Потом как-то так влился и теперь на Firebug даже смотреть не могу. Наверное вы правы, дело в привычке.
  • 4 Апреля 2013 15:32
    timofeymelnik
    Ссылка на эти самые уроки где?
    • 4 Апреля 2013 15:58
      stas.protasevich
      Обновил ссылки. На сайте Code School: 
      http://discover-devtools.codeschool.com/
  • 4 Апреля 2013 17:54
    evgeniks
    интересно...
  • 4 Апреля 2013 18:45
    byk_andrey
    ххммм.... очень интересно) добавлю: вызвать Chrome Dev Tool можно проще - просто нажать F12 =) спасибо за статью)
    • 4 Апреля 2013 18:57
      vUdav
      А я всегда вызываю через правую кнопку мыши (ПКМ -- Просмотр кода элемента) чтобы сразу попасть на нужный мне объект в коде
      • 4 Апреля 2013 19:31
        sam2019
        Я тоже :)
  • 5 Апреля 2013 12:19
    Angel0s
    Chrome Dev Tool вещь удобная, но последнее время подтормаживает и вылетает при просмотре исходного кода. Раньше не было такого. Наверное что то с новыми обновлениями.
  • 16 Февраля 2015 19:20
    Артем Ковалевский
    люди а как можно перенести текст в Developers Tool помогите срочно ))?!
  • 22 Сентября 2015 12:46
    Margo19596
    Подскажите, где скачать это расширение. И работает ли оно в хроме.
^ Наверх ^