Суперсилы Chrome DevTools

[xGromMx]

В дополнение хочу добавить очень полезный ресурс devtoolstips.com

[piumosso]

На счёт if (DEBUG) {...}
Вдруг вам понравится UserStory

[iliakan]

Вместо if (DEBUG) можно использовать замечательную опцию UglifyJS: drop_console.

Вот кратко:

drop_console -- default false. Pass true to discard calls to console.* functions.

Её описание также есть здесь: github.com/mishoo/UglifyJS2

[iliakan]

P.S. Собственно, достоинство этой опции — как раз в том, что она удаляет все вызовы console, включая time, groupCollapsed и другие, которые вряд ли понадобятся на production.

Пишите ещё про замечательные возможности Chrome DevTools :) Там всё время что-то новое, не всё ж на английском читать :)

[Bardt]

drop_console — крутая опция. Но в нашем случае в if (DEBUG) может быть завернута и другая отладочная логика, помимо console.*. Плюс, мы редко вызываем console.* напрямую: сделали прослойку, реализующую необходимые полифилы, и уже она вызывает методы консоли.

[Bardt]

В последнее время самые интересные новшества появляются в Timeline. В частности, расширяются инструменты по отладке операций отрисовки. Ждем, когда можно будет от событий Paint перейти напрямую у участку кода или стилям, которые его вызвали. Как только эти инструменты появятся и мы научимся их эффективно использовать, обязательно расскажем :)

[grimich]

По DevTools неплохой официальный Help и даже есть онлайн курс.

[Bektimirov]

Для отладки также можно использовать технику бэкдора, чтобы через eval внедряться в контекст без применения дебагера: github.com/ArtemGovorov/backdoor

[ilusha_sergeevich]

А что из этого не умеет Firefox Developer Edition?

[Malyw]

Вот полезный сниппет для Chrome, который позволяет быстро добавить breakpoint на чтение или изменение переменной/свойства в виде:

breakOn(document, 'cookie'); // вызвать debugger когда JS изменяет значение cookies