Chrome Developer Tools: лучший ресурс для обучения расширенным функциям?

Я случайно использую инструменты разработчика Chrome для отладки AJAX и JavaScript. В основном это означает, что консоль проверяет состояние элемента/переменной/метода, иногда "сетевую" вкладку для отладки проблем, передаваемых через ajax, иногда изредка прерывает точки в отладчике, если я не могу выследить ошибку JS.

Но в любое время, когда выделенный разработчик интерфейса (я вернулся) использует те же инструменты передо мной, они используют эти изящные и абстрактные небольшие функции, которые всегда оставляют меня в виду: "Черт, почему я не знаю об этом"?

... Итак, вопрос в том, что: любые предложения для ресурсов, которые обеспечивают полное и более подробное объяснение google chrome devtools?

Ответы

Ответ 1

Адди Османи отлично поработал над инструментами chrome dev, здесь вы найдете некоторые из них. Я думаю, что если вы прочтете это (и посмотрите видео), я нашел их очень полезными, если вы их прочтете, вы в значительной степени охвачены. Я включил некоторые дополнительные полезные ресурсы.

Учебники и видеоролики Addy Osmani:

Простое профилирование памяти с помощью хром-инструментов для разработки
Визуально перестроить css для более быстрого времени рисования
Breakpoint - инструменты для Chrome dev (видео Youtube)
Breakpoint Ep2 (видео Youtube с Paul Irish)
Breakpoint Ep3 (видео Youtube, исходные карты)
Курс Chrome devtools от TutsPlus (требуется подписка)

Официальный

Официальное руководство для разработчиков от Google
Google видеоуроки по инструментам разработчика от Google
Профайлинг JavaScript от Google

Другое:

Nettuts series, довольно простой, но хорошо поставленный.
Повторное введение в инструменты dev Paul Irish
Smashing Magazine также сделал статью о профилировании, но она довольно простая по сравнению с материалами Адди Османи.

Ответ 2

Вот еще один базовый из Code School, включая некоторые задачи после каждого занятия: http://discover-devtools.codeschool.com/

Ответ 3

Я нашел этот чит-код Google Chrome Devtools очень полезным: http://anti-code.com/devtools-cheatsheet/. Кроме того, этот интерактивный курс учит вас, как осваивать Chrome DevTools.