В течении нескольких последних месяцев разработчики браузера Google Chrome продолжали улучшать такой незаменимый для веб-разработчиков набор инструментов как Developer Tools.
Панель Network
Больше всего усилий было направлено на сетевые инструменты. Что же появилось нового:
- Прежде всего, это новая панель Network. Она упрощает получение всей нужной информации, которая теперь представлена более наглядно.
- Затраченное время теперь более детализировано: можно узнать сколько ушло непосредственно на получение данных, а сколько на ожидание ответа DNS.
- Developer Tools теперь берет HTTP заголовки и статусные сообщения прямо из ответа сервера. Таким образом инструментарий видит информацию в точности такой, какой ее получает браузер.
- Также добавлена подсветка синтаксиса, в точности как в старой версии панели ресурсов.
Панель CSS
Изменения коснулись также и подраздела CSS.
Редактирование CSS теперь стало заметно проще. Появилось автодополнение ключевых слов и возможность редактировать отдельные поля.
Т.к. CSS теперь также загружается в точно таком виде, каком передает сервер, появилась возможность видеть даже те параметры, которые не интерпретируются браузером.
С документацией по новым Developer Tools можно ознакомиться на официальной странице.
Посмотреть на наглядную работу Developer Tools можно на видео: