Новая версия Developer Tools

    В beta channel появилась новая версия инструментов разработчика с очень приятными изменениями.

    Во вкладке Network

    • Появилась информация о фазах каждого запроса: сколько времени ушло на прокси, DNS, ожидание, отправку и получение данных


    • HTTP заголовки теперь берутся прямо из тела ответа, до того, как они были интерпретированы вебкитом, поэтому можно увидеть в точности то, что отправил сервер

    • Добавлена подсветка синтаксиса в теле ответа

    Во вкладке CSS

    • Название и значение поля теперь можно редактировать отдельно, как в Firebug. Есть автодополнение ключевых слов


    • Показываются все CSS-свойства, даже те, которые ориентированы на другие браузеры или содержат ошибки


    • Можно выбрать в каком формате показывать цвета: как они были заданы в стилях, Hex, RGB, или HSL

    Во вкладке Resources

    • Текст CSS файлов теперь отражает измения, внесенные при редактировании соотвествующих стилей во вкладке Elements. Таким образом, стало существенно проще вносить эти изменения в исходные файлы. По мере редактирования отслеживается полная история изменений. Можно выбрать любую ревизию, и посмотреть, что изменилось относительно оригинала. Даже есть подстветка изменений, которая у меня почему-то не работает. Ревизию можно взять мышкой и перетащить в текстовый редактор.


    Еще пара интересных вещей (которые были и раньше)

    • Во вкладке Resources можно править JS файлы (для HTML и CSS почему-то не работает)
    • Можно скопировать переменную из консоли в буфер обмена с помощью copy(varName)
    • Можно перейти к нужному DOM-элементу вызвав в консоли inspect(elementReference)
    • Переменная $0 в консоли всегда содержит текущий элемент, вырбанный во вкладке Elements
    Оригинал новости на английском
    Поделиться публикацией
    Комментарии 36
    • НЛО прилетело и опубликовало эту надпись здесь
        +18
        наконец-то цсс редактировать по-человечески можно! :)
          +5
          лучше бы вернули в табе resourses фильтр по типам файлов
            +2
            Его во вкладку «Network» перенесли (внизу под списком)
              0
              Только есть один весь немаленький минус. Эта вкладка обновляется только если она открыта
                0
                Пардон, если Web-inspector открыт
            0
            Название и значение поля теперь можно редактировать отдельно, как в Firebug. Есть автодополнение ключевых слов

            это особенно приятно
              0
              у меня подсветка изменений в ревизии работает, если в css взять код:
              h1,h2,h3 {margin: 0; padding:0;}
              h1 {padding:1;}

              и заменить на:
              h1,h2,h3 {margin: 0; padding:0;}
              h1 {padding:2;}


              то в ревизии подсвечиваются даже обе строки, видимо подстветит везде, где идет описание h1
              • НЛО прилетело и опубликовало эту надпись здесь
                  +5
                  Ну его хотябы делают, и постоянно дорабатывают. И в принципе не так уж и плохо.
                  +1
                  Во вкладке Resources можно править JS файлы

                  Теперь проектирование js-функциональности сайта, будет еще быстрее и удобнее. Избавит от Ctrl+F5 :)
                  • НЛО прилетело и опубликовало эту надпись здесь
                      0
                      Когда как :)
                    0
                    Часть этих вещей уже в stable.
                      +2
                      Спасибо автору за топик, но большая часть «новшеств» появилась в дев версии еще несколько месяцев назад
                        –1
                        Я на бете юзаю уже месяц наверное
                          +1
                          Кажется, от фаербага теперь можно отказаться насовсем.
                            0
                            Фазы сетевых запросов у меня давно отображаются в обычном свежем хроме.
                            Или я не прав?
                              –8
                              Сколько лет еще должно пройти чтобы они догнали файрбаг по возможностям и удобности? Года 2 минимум?
                                +8
                                До уровня, на котором работаю я, они уже догнали и обогнали FireBug (как бы я поначалу не кричал, какой же Inspector херовый и какой же крутой FireBug).

                                Для всех моих задач (веб-разработка, иногда верстка и js) Хрома хватает за глаза, разве что редактирования печенек нету из коробки, но есть плагины.
                                +2
                                Не dev, а beta
                                10.0.648.114 beta — всё это есть
                                  0
                                  Исправил в заметке. В оригинальной статье однозначно не было указано, и я почему-то решил что это в деве.
                                  0
                                  Там убрали переопределение знака $?
                                  А то надоело, что копируешь код jQuery, а он не работает, т.к. $ переопределен собственной функцией
                                    0
                                    Не убирали. А в какой ситуации возникает проблема? Там же это переопределение в любом случае срабатывает до подключения jQuery. А потом jQuery его затирает. Так оно, собственно, у меня и работает.
                                    0
                                    знающие, в респонсах — html вид не впилили еще?
                                      0
                                      Кто-нибудь знает, это они глобальный WebKit-овский WebInspector правят (т.е., напр., в Safari тоже самое будет) или свой изобретают?
                                        0
                                        Вообше это форк, но по идеи стараются заливать фичи и в webkit, во всяком случае у них такой призыв на сайте висит. Реальность же на совести множества девелоперов.
                                          0
                                          0
                                          еще бы сделали, чтобы куки можно было встроенными средствами менять, вообще было бы отлично
                                          ну и заодно чтобы json расшифровывался, как в firebug
                                            0
                                            И до сих пор без поддержки фреймов. Фреймы, конечно, устарели, но сейчас развиваются iframe-приложения, а в них тоже хочется удобно дебажить.
                                              0
                                              1. Как отключить всплывающее окошко с размерами элемента (если наводить мышь на dom-структуру)?
                                              2. Как сделать, чтобы network работало и запоминало, даже если плагин визуально не открыт?
                                                0
                                                Добавлена подсветка синтаксиса в теле ответа

                                                наконец-то :)
                                                  0
                                                  Google Chrome явно идёт к успеху.
                                                    +1
                                                    DevTools скоро станет полноценным IDE, осталось только продумать как это сохранять на сервер :)
                                                      0
                                                      Зачем придумывать? С помощью PUT-запроса, очевидно.
                                                      0
                                                      Наклони ж меня курсивом! Только вчера ругался на ХромоДевТул, а тут такие изменения. Спасибо за новость.

                                                      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                      Самое читаемое