Откройте программные средства для разработчиков Safari/Google Chrome программно с JavaScript

Я ищу способ открыть инструменты разработчика "WebKit" из script, прикрепленного к веб-странице. Мне нужны решения как для Google Chrome, так и для Safari, которые откроют панель инструментов разработчика, если она еще не открыта, и (надеюсь, если вы сможете выяснить, как), также переключитесь на конкретную вкладку/раздел указанной панели при открытии.

(Use-case, если кому-то интересно: я хочу открыть окно вывода console.log, если возникла ошибка, и разработчик смотрит на страницу, эта конкретная страница будет выводить некоторые блок-тесты JavaScript.)

Я задаю вопрос об этом вопросе, потому что он, очевидно, тот, на который раньше никто не отвечал, и ответ - волосатый. Пожалуйста, не отвечайте на него, если у вас нет реального ответа, что: 1) работает в обоих браузерах и 2) не требует частных API расширения, которые не будут работать со статической веб-страницы.

Смотрите (связанные, но специфичные для Chrome и расширения): Могу ли я программно открыть devtools из расширения Google Chrome?

Ответ 1

Просто: вы не можете.

Инструменты Dev не изолированы (в отличие от любой веб-страницы), тем самым предоставляя изолированным средам возможность открывать и управлять средой без поддержки > дефект дизайна.

Я надеюсь, что это ответит на ваш вопрос: -)

Ответ 2

Вы не можете напрямую использовать инструменты Chrome Dev с веб-страниц. Он связан с браузером.

Но вы можете использовать его как обычное веб-приложение. Перейдите в Chrome Developer Tools, затем перейдите в Contributing. Вы найдете помощь по использованию Dev Tools для вашего приложения.

Настройка

Установите Chrome Canary на Mac OS/Windows или загрузите последнюю сборку Chromium из архива хромовой непрерывной сборки в Linux.
Clone Blink git repo из https://chromium.googlesource.com/chromium/blink.git
Настройте локальный веб-сервер, который будет обслуживать файлы из WebKit/Source/WebCore/inspector на каком-либо порту (8090)

Запуск

Запустите одну копию Chrome Canary со следующими флагами командной строки: --remote-debugging-port = 9222 --user-data-dir = blink/chromeServerProfile --remote-debugging-frontend = "http://localhost: 8090/front_end/inspector.html". Эти флаги заставляют Chrome разрешать соединения websocket в localhost: 9222 и обслуживать интерфейсный интерфейс пользователя из локального репозитория git. (Откорректируйте путь к chromeServerProfile, чтобы быть некоторым доступным для записи каталогом в вашей системе).
Откройте образец страницы (например, www.chromium.org).
Запустите вторую копию Chrome Canary с флагом командной строки: -user-data-dir =/work/chromeClientProfile. Откройте http://localhost:9222. Среди миниатюр вы увидите образец страницы из другого экземпляра браузера. Нажмите на нее, чтобы начать удаленную отладку вашей страницы образца.
Открывается веб-страница DevTools с удаленного интерфейса отладки в первом экземпляре браузера, который служит из git repo вашей локальной файловой системы. Отлаживайте эту веб-страницу Devtools и редактируйте ее как любое другое веб-приложение.

Надеюсь, это то, что вам нужно.

Ответ 3

Невозможно управлять инструментом веб-разработчика на странице script, кроме как через Консольный API, который обеспечивает в основном протоколирование объекты. Сценарий управления сценариями больше, чем это будет серьезной проблемой безопасности, поскольку это позволит веб-странице управлять частями браузера.

Единственным API, удаленно связанным с тем, что вы пытаетесь сделать, является команда debugger, которая переключается на панель script только если инструменты разработчика уже открыты.

Но кто вы пытаетесь разработать эту функцию для?

Если это для разработчиков, работающих на сайте, то лучше просто использовать существующие инструменты разработчика вручную, установив точки останова или приостановить переключение исключений.

Если это для конечных пользователей, не. Если ваш сайт не будет использоваться высокотехнологичными веб-разработчиками, вы только отпугнете пользователей, если инструменты разработчика внезапно появятся с ошибками.

Если вы действительно хотите показывать ошибки, вы можете реализовать свою собственную структуру ведения журнала и пользовательский интерфейс для создания отчетов об ошибках, который работает с базовым JS и не зависит от конкретной среды браузера.

Ответ 4

Я не знаю, разрешит ли borwser script открыть расширение, так как это может привести к неуверенности, но я надеюсь, что вы можете создать надстройку, чтобы сделать то же самое.

Пожалуйста, обратитесь к link

здесь вы найдете расширение/дополнение для Chrome и Firefox, то есть на самом деле очень хорошее расширение, вам не понадобится ничего в нормальном сценарии.

Установите это дополнение/расширение и скажите мне, если хотите, я использую его, и несколько раз он работает лучше, чем встроенный.

Я надеюсь, что это поможет вам в достижении вашего требования.