Возвращаем старый Web Inspector в Safari 6

  • Tutorial

Уверен, что я не одинок в своих мучениях с новыми devtools в новом Safari. И когда они в очередной раз меня одолели, я, как человек разумный, обратился за помощью к гуглу.



Гугл предложил мне несколько вариантов избавления от страданий:

  1. воспользоваться меню Develop > Use WebKit Web Inspector
  2. штормить поддержку Apple
  3. использовать WebKit вместо Safari

Первый вариант мне не подошел по причине отсутствия такового пункта меню в имеющихся билдах Safari.
Второй не подошел из-за мaлой вероятности положительного исхода.
Третий не устроил тем, что WebKit конфликтовал с каким-то установленным в Safari расширением и при попытке открыть любую страницу немногим сложнее ya.ru вешался намертво. Разбираться с этим было влом, да и плодить зоопарк из браузеров не очень хотелось (у меня их итак штук семь установлено).
Если вас не смущает WebKit, то можете смело его использовать и дальше не читать.


Так как WebKit не особо отличается от Safari, и в нём присутствуют и старые и новые devtools, я полез ковырять его внутренности. В итоге в его недрах была обнаружена директория inspector, натолкнувшая на вполне понятные мысли, которые в результате секаса с различными билдами и привели к решению поставленной задачи.



Результат




Рецепт


Для лентяев ниже размещен инсталлятор, который всё сделает сам.
Для любознательных по порядку:



  1. Загружаем WebKit и монтируем образ
  2. Копируем файлы из директории /Volumes/WebKit/WebKit.app/Contents/Frameworks/10.7/
    WebCore.framework/Versions/A/Resources/inspector
    в /System/Library/PrivateFrameworks/WebInspector.framework/Versions/Current/Resources
  3. Переименовываем inspector.html в Main.html
  4. Наслаждаемся

Тоже самое машинопонятным языком:
# make original inspector backup
sudo cp -RH /System/Library/PrivateFrameworks/WebInspector.framework /System/Library/PrivateFrameworks/WebInspector.framework.backup

# copy WebKit inspector
sudo cp -RH /Volumes/WebKit/WebKit.app/Contents/Frameworks/10.7/WebCore.framework/Versions/A/Resources/inspector/* /System/Library/PrivateFrameworks/WebInspector.framework/Versions/Current/Resources
sudo mv /System/Library/PrivateFrameworks/WebInspector.framework/Versions/Current/Resources/inspector.html /System/Library/PrivateFrameworks/WebInspector.framework/Versions/Current/Resources/Main.html

Как вы могли заметить на видео, я немного раскрасил инспектор. Способ был позаимствован тут и немного адаптирован к Safari.
Если вам не нравится такое оформление, достаточно выполнить в консоли:

sudo sed -i'.bak'  '2781,$d' /System/Library/PrivateFrameworks/WebInspector.framework/Versions/A/Resources/inspector.css
и перезапустить Safari.

Тестировалось на Safari 6.0.1 и 6.0.2 на английской и русской системах (10.8.2). Существенных косяков выявлено не было.

Всем приятного dev-a.

Инсталлятор

Похожие публикации

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 61

    –1
    прошу прощения, возможно я что-то не так понял, но разве инспектор не идет штатно в комплекте с safari?
    Скриншот

      +2
      Пост о том как вернуть старый инспектор (как был в Safari 5 и Google Chrome).
      Новый инспектор — тулза пока неюзабельная.
        +1
        понятно, тогда действительно прошу прощения за мою невнимательность
    • НЛО прилетело и опубликовало эту надпись здесь
        +1
        Существует, но не в Safari 6, только в WebKit-e.
        0
        А что у вас за расширение к Finder, которое добавляет хромовские вкладки?
          +1
            +1
            Ради одной этой ссылки стоило зайти в комментарии! Спасибо огромное!
          0
          Как отладчик для iOS устройств он не перестает работать?
            +1
            У меня работает. Единственное в режиме remote web inspector не ловятся POST-данные, но это, ЕМНИП, в старом также было.
            0
            А дебажить в нем с «use strict» можно?
            В стандартном вот в консоли содержимое переменных на брейкпоинте не посмотреть :[
              0
              Если честно, я не в курсе.
              Дайте use case, проверю.
                0
                делаете скрипт, какой-нибудь такой:

                ( function() {
                    "use strict";
                
                    x = 5;
                    ++x;
                )() );


                ставите брейкпоинт на "++x" и попробуйте в консоли набрать «x» и жмакнуть Enter.
                  0
                  Получаю ReferenceError: Strict mode forbids implicit creation of global property 'x'

                  Или я что-то не так делаю?
                    0
                    Ой, var забыл перед x = 5, извините :)
                    Можете с var еще потестить?
                      0
                      Получаю
                      ReferenceError: Can't find variable: x
                        0
                        Давайте попробуем скриншотом :)


                        Вот такое есть?
                          0
                          Один раз я получил такое сообщение.
                          Минут через 5-10 проверю еще раз.
                            0
                            В общем
                            как-то так
                            image

                            Оно?
                              0
                              Ага, оно. Жалко :)
                                0
                                return, а что должно быть?
                                  0
                                  Должно быть «5», а сейчас там ошибка в Developer Tools, которую в Safari когда-то уже исправляли, еще на старой версии.
                                    0
                                    Ясно. Спасибо за информацию. Попробую еще поиграться с разными билдами, может и получится что-то сделать.
                                    Я так понимаю что на новом инспекторе ошибка присутствует?
                                      0
                                      Ага. А вот в версии до появления новых Developer Tools ошибку, насколько я помню, чинили :[
                                      0
                                      return,

                                      Сейчас специально загрузился в 10.7.5, Safari 5.1.7 – ошибка присутствует.
                  0
                  АААА!!! Как я ждал такого решения! Самому докопаться времени так и не нашлось. Спасибо огромное!!!
                    0
                    Нашёл это ещё на гитхабе, там рассказано, как пофиксить некоторые возможные баги. Интересно, можно как-то сделать, чтобы post body показывался? Без этого всё равно приходится пользоваться хромовским отладчиком.
                      +1
                      В браузере POST отображается, не отображается в режиме remote web inspector (отладка iPhone etc).
                      Пример (кликабельно)
                      image
                        0
                        Sorry, случайно удалил файл.

                        Новый пример (кликабельно)
                        image
                          0
                          О, это радует, спасибо. Помню, что у меня давно ещё не показывался, а я потом уже не проверял.
                            0
                            Я ковырял бету Safari 6.0.3. Там уже и в новом инспекторе показываются данные POST.
                      +1
                      Я так давно этого ждал) Автору низкий поклон и огромное спасибо)
                        0
                        Вот только что-то консоль по esc как-то странно открывается((
                          0
                          В смысле? Шоткат для консоли CMD + ALT + I. Или вы что-то другое имеете в виду?
                            0
                            Другое) В отладчике есть такая консоль, которая выезжает снизу по Esc, в ней можно выполнять разные команды, или просто js, аналогом является кнопка «Console» на панели с кнопками во фрейме отладчика. Только при нажатии
                            на кнопку «Console», консоль открывается во весь фрейм, а по esc она занимает небольшую часть экрана.
                              0
                              Действительно.
                              Я просто для вызова консоли всегда пользовался второй иконкой слева в нижнем ряду.
                        0
                        Плюсую! А как быть с цветовой темой инспектора, она где настраивается?
                          +1
                          /System/Library/PrivateFrameworks/WebInspector.framework/Versions/A/Resources/inspector.css
                          начиная со строки 2800
                          0
                          А у меня вот что-то не заработало :( пробовал и через инсталлер и руками. Макось 10.8.2/Сафари 6.0.2…
                            0
                            Какие симптомы?
                              0
                              Да собсно ничего не происходит — как открывался новый инспектор, так и открывается.
                                0
                                Safari перезапускали?
                                Покажите выхлоп
                                ls /System/Library/PrivateFrameworks/WebInspector.framework/Versions/A/Resources/
                                
                                  0
                                  Если запускать через ваш инсталлер — вообще ничего не меняется.
                                  До:
                                  [11:12] cmd#:5002
                                  kostik@kostik: ~> ls /System/Library/PrivateFrameworks/WebInspector.framework/Versions/A/Resources/
                                  Images/		Main.css	Main.js		ca.lproj/	da.lproj/	el.lproj/	es.lproj/	fr.lproj/	hr.lproj/	it.lproj/	ko.lproj/	no.lproj/	pt.lproj/	ro.lproj/	sk.lproj/	th.lproj/	uk.lproj/	zh_CN.lproj/
                                  Info.plist	Main.html	ar.lproj/	cs.lproj/	de.lproj/	en.lproj/	fi.lproj/	he.lproj/	hu.lproj/	ja.lproj/	nl.lproj/	pl.lproj/	pt_PT.lproj/	ru.lproj/	sv.lproj/	tr.lproj/	version.plist	zh_TW.lproj/
                                  

                                  После:
                                  [11:55] cmd#:5003
                                  kostik@kostik: ~> ls /System/Library/PrivateFrameworks/WebInspector.framework/Versions/A/Resources/
                                  Images/		Main.css	Main.js		ca.lproj/	da.lproj/	el.lproj/	es.lproj/	fr.lproj/	hr.lproj/	it.lproj/	ko.lproj/	no.lproj/	pt.lproj/	ro.lproj/	sk.lproj/	th.lproj/	uk.lproj/	zh_CN.lproj/
                                  Info.plist	Main.html	ar.lproj/	cs.lproj/	de.lproj/	en.lproj/	fi.lproj/	he.lproj/	hu.lproj/	ja.lproj/	nl.lproj/	pl.lproj/	pt_PT.lproj/	ru.lproj/	sv.lproj/	tr.lproj/	version.plist	zh_TW.lproj/
                                  

                                    0
                                    Попробую еще разок с чистого листа ручками.
                                      0
                                      Судя по листингу, у вас не скопированы файлы. И это странно, поскольку pkg накатывает свое файло сверху.
                                        0
                                        Файлики скопированы в /System/Library/PrivateFrameworks/WebInspector.framework/Versions/Current/Resources/
                                        В /System/Library/PrivateFrameworks/WebInspector.framework/Versions/A/Resources/ все старое.
                                        Вопрос: там что-то является ссылкой? A или Current кто-то на кого ведет?
                                          0
                                          ~ % ls -la /System/Library/PrivateFrameworks/WebInspector.framework/Resources
                                          lrwxr-xr-x  1 root  wheel  26 Dec 23 19:59 /System/Library/PrivateFrameworks/WebInspector.framework/Resources -> Versions/Current/Resources
                                          
                                          ~ % ls -la /System/Library/PrivateFrameworks/WebInspector.framework/Versions/Current 
                                          lrwxr-xr-x  1 root  wheel  1 Dec 23 19:59 /System/Library/PrivateFrameworks/WebInspector.framework/Versions/Current -> A
                                          

                                          Current – это ссылка на А.
                                          По крайней мере, у меня это так на 4-х системах.
                                            0
                                            Мда… Видимо сильно устал в пятницу вечером… Накосячил где-то… Заломился сейчас на домашний комп, вернул все как положено, сделал все еще раз — все получилось. Извиняюсь за беспокойство.
                                              0
                                              Хорошо то, что хорошо заканчивается :)
                              +1
                              Огромное спасибо! Самый ценный рецепт за последнее время. Новый инспектор неюзабелен совершенно. Туча пустого места и непонятная экономия на спичках, когда касается интерфейса.
                                0
                                У вас нет проблемы с вылетом Сафари 6 при открытии новой вкладки?
                                  0
                                  У меня нет.
                                  0
                                  простите, а про старый активити монитор просто забыть, да?
                                    0
                                    Вы о чем?
                                      0

                                      вот такое окошко. его тоже зарубили, но оно олицетворяло для меня любовь к сафари

                                      (это офтоп, как я понимаю; лишь касается обновлений)
                                        0
                                        Окно выпилили. Но, в принципе, все загруженные ресурсы с линками можно посмотреть и в нынешнем инспекторе.
                                    0
                                    С обновлением до 6.0.4 перестало работать. У кого фурычет?
                                      0
                                      да :( у меня тоже отвалилось…
                                        0
                                        Вроде бы WebInspector.framework переехал из /System/Library/PrivateFrameworks/ в /System/Library/StagedFrameworks/Safari/. Собствено после копирования с новыми путями и не работает.
                                          0
                                          у меня заработало
                                            0
                                            Подтверждаю, скопировал WebInspector.framework в старое место, запустил SOWI, скопировал обратно. Работает.

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

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