Эй-эй, Кейси снова здесь, чтобы получить еще один дайджест, чтобы рассказать вам о том, что нового в DevTools с прошлого месяца.
Новые возможности в консоли
В Chrome 56, который в настоящее время находится в Canary, консоль DevTools работает на базе CodeMirror . Это открывает целый ряд новых функций, таких как:
Подсветка синтаксиса при вводе . Раньше DevTools мог выделять синтаксис только после оценки блока кода.
Соответствующая скобка/скобка/подсветка фигурной скобки . Если у вас есть лишняя скобка, скобка или фигурная скобка, DevTools выделяет ее красным.
![несовпадающая скобка](https://developer.chrome.com/static/blog/devtools-digest-2016-10/image/mismatched-parenthesis-76c3a7f4bd247.png?hl=ru)
Соответствующие скобки, скобки или фигурные скобки выделяются серым цветом, когда курсор находится рядом с одной из них.
![совпадающие круглые скобки](https://developer.chrome.com/static/blog/devtools-digest-2016-10/image/matched-parentheses-6084ed0e040b6.png?hl=ru)
Умный возврат . Когда вы вводите многострочный блок кода, DevTools теперь знает, создавать ли новую строку или выполнять код каждый раз, когда вы нажимаете Enter . Например, предположим, что вы хотите выполнить следующий цикл for
в консоли:
for (var i = 0; i < 5; i++) {
console.log(i);
}
Раньше нажатие Enter после ввода первой строки приводило к тому, что DevTools оценивал эту строку, что приводило к ошибке. Чтобы продолжить блок кода на новую строку, вам пришлось бы удерживать Shift перед нажатием Enter . Напротив, теперь DevTools просто автоматически продолжает блок кода на новой строке после того, как вы нажмете Enter , как и ожидалось.
Несколько курсоров . Удерживайте Command (Mac) или Control + Alt (Windows, Linux), а затем щелкните.
![несколько курсоров](https://developer.chrome.com/static/blog/devtools-digest-2016-10/image/multiple-cursors-427c9adec6967.gif?hl=ru)
Canary теперь выделяет нетоповые контексты красным цветом.
Если вы недавно работали в консоли, возможно, вы столкнулись с небольшой неприятной ошибкой, которая устанавливала для селектора контекста выполнения значения, отличные от top
.
Эта ошибка должна быть исправлена в стабильной версии, но на всякий случай DevTools в Canary (Chrome 56) теперь предупреждает вас, что вы не находитесь в top
контексте, выделяя селектор красным.
![неверхний контекст выделен красным](https://developer.chrome.com/static/blog/devtools-digest-2016-10/image/non-top-context-highlight-9dae4747bf537.png?hl=ru)
Новый пользовательский агент: UC Browser.
Теперь вы можете выбрать UC Browser для iOS, Android или Windows Phone на вкладке «Условия сети» .
![Пользовательский агент UC Browser](https://developer.chrome.com/static/blog/devtools-digest-2016-10/image/uc-browser-user-agent-6f990e5892643.png?hl=ru)
Делиться значит заботиться
Как всегда, мы будем рады услышать ваши отзывы или идеи по поводу всего, что связано с DevTools.
- Пишите нам в ChromeDevTools в Твиттере, чтобы задать краткие вопросы, оставить отзыв или поделиться новыми идеями.
- Для более длительных обсуждений лучше всего подойдет список рассылки или Stack Overflow .
- По всем вопросам, связанным с документацией, откройте проблему в нашем репозитории документации.
- Вы всегда можете обратиться прямо к команде, чтобы сообщить об ошибке или запросить функцию в Crbug .
До следующего месяца,
Кейси