Как отключить js в консоли браузера
У меня в Chrome открылась случайная интернет-страница. Я открываю его с включенным JavaScript, так как мне нужно выполнить некоторые скрипты.
Чем с какого-то момента я хочу остановить выполнение скрипта, поэтому никакие таймеры или обработчики событий не должны запускаться. Конечно, использование бесконечного цикла не нормально, так как я хочу, чтобы страница была отзывчивой.
Как я могу этого добиться?
Следующий код частично делает то, что мне нужно
- Прослушиватели событий для document и обратных вызовов ajax выживут
- Это вызывает синтаксический анализ html, поэтому некоторая неверная разметка может быть изменена при разборе
Также я надеюсь, что есть какой-то способ сделать это через devtools, не взаимодействуя с кодом страницы.
PS: если мне нужно использовать другой браузер, это нормально.
2 ответа
Вы можете включить / отключить JavaScript на странице в любой момент, используя командное меню в DevTools. Вы можете получить доступ к этому меню, используя Cmd + Shift + P (Mac) или Ctrl + Shift + P (Windows / Linux).
Начните вводить Disable JavaScript и нажмите Enter , чтобы отключить выполнение скрипта.
В следующем примере я запустил асинхронный таймер, чтобы регистрировать добавочный счет каждые 500 мс. После отключения JavaScript выполнение было приостановлено и больше ничего не регистрировалось на консоли.
Позже я снова включил JavaScript, набрав «Включить JavaScript» и нажав Enter . После этого выполнение продолжилось, и таймер продолжил с того места, где он остановился.
Примечание. . Любой синхронный код, все еще работающий при попытке отключить JavaScript, не будет уничтожен. Это закончится, а затем дальнейшее выполнение будет отключено.
Добавление к Гидеону Пизеру:
Shift-Ctrl-I - дождитесь открытия devTools,
затем Shift-Ctrl-P - если вы не ждете: откроется диалоговое окно печати .
затем - см. ответ Гидеона Пизера.
Я работаю над веб-приложением в HTML / JavaScript, и я хочу, чтобы пользователи не вызывали функции в своей консоли браузера, чтобы избежать обмана. Все эти функции содержатся в уникальном файле под названием functions.js который загружается в голову .
после поиска в Интернете я нашел это решение, которое отлично работает в Google Chrome, но неэффективно в других браузерах, таких как Firefox:
есть ли общий способ отключить вызов функций из консоли? Зависит ли это от браузера или это просто проблема области или, может быть, что-то еще, что я проигнорировал?
есть ли общий способ отключить вызов функций из консоли?
нет. там нет:никогда. ну, по-видимому, Facebook нашел способ в Google Chrome сделать это:как Facebook отключает встроенные инструменты разработчика браузера? - хотя, я бы счел это ошибкой: -)
может быть, это что-то еще, что я проигнорировал?
да. JavaScript выполняется на стороне клиента, а клиент имеет полную власть над ним. Он может выбрать, выполнять его или нет, как его выполнять и изменять его, как он хочет, прежде чем выполнять его. Современные инструменты разработчика позволяют пользователю выполнять произвольные функции в произвольных областях при отладке скрипта.
вы можете затруднить интроспекцию и использование (вызов) кода, избегая выставлять свои методы в глобальной области и запутывая (уменьшая) источник. Однако никогда не доверяйте клиенту. Чтобы избежать обмана, вам придется выполните все важные задачи на сервере. И не ожидайте, что все запросы будут поступать из вашего кода JavaScript или из браузера вообще; вам нужно будет обрабатывать произвольные запросы, которые могут быть выданы каким-то ботом.
Minify ваш источник JavaScript, чтобы запутать любой смысл. Это не сделает невозможным мошенничество, но очень трудно найти способы обмануть.
Если вы хотите избежать "обмана", вам понадобится проверка на стороне сервера пользовательского ввода. Клиент может отправлять информацию о сервере только в соответствии с протоколом, определенным на стороне сервера, и, следовательно, обман невозможен, если ваш протокол не имеет утечек безопасности (и большинство протоколов, особенно новые протоколы).
песочницы, такие как Facebook API, Google Caja и более позволяют произвольно применять любые ограничения, "переписывая" язык (они запускают парсер и в основном повторно компилируют пользовательский код и делают все, что небезопасно, безопасным). Это работает до тех пор, пока вы можете убедиться, что пользовательский код может работать только в этих средах. Таким образом, код от других пользователей не может связываться с вашим клиентом, но вы, конечно, можете связываться со своим собственным клиентом.
Я пытаюсь отладить функции веб-сайта, когда пользователи отключают свой JavaScript. Мне было интересно, Как отключить JavaScript для страницы из Google Chrome devtools?
выберите ⋮ меню в углу инструментов разработчика, нажмите кнопку Настройки, затем проверьте Disable Javascript .
Chrome был обновлен после этого ответа. Теперь вам нужно нажать кнопку ⋮ в правом верхнем углу, затем "Настройки (F1) -> отладчик -> отключить JavaScript", чтобы добраться до этой опции.
- Инструменты Разработчика (F12) В
- три вертикальные точки в правом верхнем углу
- настройки
- на вкладке "Настройки" слева
- будет раздел "отладчик" с опцией (возможно, справа)
теперь в DevTools встроено командное меню, которое упрощает отключение JavaScript. Это было примерно с апреля 2016 года или около того.
- Открыть DevTools.
- пресс команда + Shift + P (Mac) или управления + Shift + P (Windows, Linux), чтобы открыть меню команд. Убедитесь, что курсор сфокусирован на окне DevTools, а не на браузере область просмотра.
- тип Disable JavaScript (или нечто подобное. это нечеткий поиск), а затем нажмите Enter .
использовать когда вы хотите включить его обратно.
chrome://chrome/settings/content Javascript / Управление Исключениями
Это расширение делает его быстрее : Быстрый Javascript Switcher
вы также можете запустить Chrome с отключенным JavaScript по умолчанию, используя флаг:
вы могли бы использовать это, например, запустив Chrome следующим образом:
на OSX мне пришлось щелкнуть тройные вертикальные точки и снять флажок в разделе настроек. Который также можно открыть с помощью f1
самый быстрый способ, вероятно, это:
- F12, чтобы открыть консоль разработчика
- ctrl + shift + p, чтобы открыть командный инструмент (windows)
- введите "отключить javascript" и нажмите enter
- перейти к опции (окна: три вертикальные точки в правом верхнем углу) - > Настройки, или нажмите F1.
- В общем разделе вы найдете "отключить JavaScript"
значок шестеренки больше не является частью средства разработчика. Поскольку Chome 30.0 даже невозможно вернуть его (в Google Chrome Developer Tools значки на панели инструментов исчезли. Что происходит?)
использование только клавиатуры по крайней мере для Windows 10:
- F12 , показывает инструменты разработчика
- F1 показывает параметры
- tab , переходит к флажку "отключить Javascript"
- пробел переключает опцию
- esc , скрывает параметры
чтобы временно заблокировать JavaScript в домене:
- Нажмите Меню ⋮ в углу инструментов разработчика, нажмите Настройки
- нажмите "Дополнительно" внизу
- нажмите на Настройки контента
- нажмите на JavaScript
- выключить
вставьте его: chrome:/ / настройки / содержимое
перейдите в раздел "Javascript" и отключите его.
и там вы можете вставить URL вашего сайта в Manage exceptions.. и измените приоритет JavaScript с ALLOW на BLOCK.
быстрый способ:
1) просто нажмите на кнопку CTRL + SHIFT + P
2) заполните поле тремя буквами dis и появится это поле и выберите пункт Отключить Javascript
Если вы занимаетесь веб-программированием, это значит, что вам не надо рассказывать о том, насколько в вашей работе важна отладка. Нередко для записи данных в логи, для их форматирования или вывода на экран используют внешние библиотеки, не учитывая при этом того факта, что в распоряжении программистов имеются JavaScript-команды для работы с консолями, которые встроены в браузеры. И обладают эти консоли гораздо более серьёзными возможностями, чем может показаться на первый взгляд.
Пожалуй, первое, что многим приходит в голову при слове «консоль» — это команда console.log() . Однако, она — лишь одна из многих подобных команд. Материал, перевод которого мы сегодня публикуем, посвящён особенностям работы с консолью JavaScript.
Что такое консоль?
Консоль JavaScript — это механизм, интегрированный в современные браузеры, который поддерживает встроенные инструменты разработки в интерфейсе, напоминающем командную строку. С использованием консоли разработчик может делать следующее:
- Просматривать журналы ошибок и предупреждений, возникающих на веб-странице.
- Взаимодействовать с веб-страницей, используя команды JavaScript.
- Отлаживать приложения и работать с DOM непосредственно из браузера.
- Исследовать и анализировать сетевую активность.
Методы console.log, console.error, console.warn и console.info
Вероятно, наиболее часто используемыми методами при работе с консолью являются console.log() , console.error() , console.warn() и console.info() . Этим методам можно передавать один или несколько параметров. Система вычисляет значение каждого из них и объединяет все результаты в строку, части которой разделены пробелами. В случае с объектами или массивами эти команды позволяют выводить их в таком виде, который позволяет просматривать их содержимое. Вот как это выглядит.
Использование различных команд для вывода данных в консоль
Метод console.group
Метод console.group() позволяет собирать серии вызовов console.log() (а также — других подобных методов) в группы, содержимое которых можно сворачивать и разворачивать. Пользоваться этим методом очень просто: после вызова console.group() (или после console.groupCollapsed() , если группу требуется вывести сразу в свёрнутом виде) нужно поместить все вызовы console.log() , которые надо сгруппировать. Затем, в конце набора команд, которые требуется сгруппировать, надо поместить команду console.groupEnd() . Рассмотри пример.
В консоль, после выполнения этого фрагмента кода, попадёт следующее.
Группировка данных в консоли с помощью метода console.group()
Метод console.table
После того, как я узнал о существовании метода console.table() , моя жизнь изменилась навсегда. Например, использование обычной команды console.log() при выводе JSON-кода или больших JSON-массивов — это сущий кошмар. Метод console.table() позволяет выводить сложные структуры данных внутри симпатичных таблиц, столбцам которых можно давать имена, передавая их в качестве параметров (не все браузеры поддерживают эту возможность console.table() ). Вот пример работы с этой командой.
То, что получилось, и выглядит отлично, и способно облегчить отладку.
Табличное оформление выводимых данных с помощью console.table()
Методы console.count, console.time и console.timeEnd
Методы console.count() , console.time() и console.timeEnd() можно назвать чем-то вроде швейцарского ножа для разработчика, который занимается отладкой приложений. Так, метод console.count() позволяет подсчитывать количество собственных вызовов и выводить его в консоль с заданной меткой. Метод console.time() позволяет запустить именованный таймер (имя передаётся ему в качестве параметра, на одной странице может присутствовать до 10000 таймеров). Для того чтобы остановить конкретный таймер, используется команда console.timeEnd() с меткой таймера, передаваемой в качестве параметра. Она останавливает таймер и выводит время его работы в консоль. Вот как пользоваться этими методами.
А вот как выглядит результат работы этого кода в консоли.
Использование методов console.count(), console.time() и console.timeEnd()
Методы console.trace и console.assert
Методы console.trace() и console.assert() позволят выводить из места их вызова информацию о стеке. Представьте себе, что вы занимаетесь разработкой JS-библиотеки и хотите сообщить пользователю о том, где возникла ошибка. В подобном случае эти методы могут оказаться весьма полезными. Метод console.assert() похож на console.trace() , разница между ними заключается в том, что console.assert() выведет данные лишь в том случае, если не выполнится переданное ему условие. Вот как работать с этими методами.
Несложно заметить, что вывод, генерируемый этим фрагментом кода, выглядит так же, как нечто подобное выглядело бы в React (или в любой другой библиотеке), когда фреймворк сообщает о возникновении исключения.
Результат использования команд console.assert() и console.trace()
Команды для работы с консолью и продакшн-код
Команды для работы с консолью нужны на этапе разработки и отладки приложений. Это значит, что когда придёт время выпуска продукта, эти команды придётся из кода удалить. Об этом можно просто забыть и, через некоторое время после сборки продакшн-версии проекта, заметить, что программа пишет что-то в консоль тогда, когда в этом нет никакой необходимости. Не стоит нагружать компьютеры ненужной работой, пусть и такой, казалось бы, незначительной, как вывод данных в консоль. В то же время, учитывая то, что команды для работы с консолью могут пригодиться в ходе доработки приложения, лучше всего не удалять их из исходного кода программы насовсем, а убирать их лишь из её продакшн-версии. Тут нам на помощь придут средства для сборки проектов. Так, я постоянно пользуюсь Webpack, и на работе, и в собственных проектах. Этот инструмент позволяет удалять все ненужные команды по работе с консолью (он способен отличить их от других команд) из продакшн-сборок с использованием uglifyjs-webpack-plugin.
Эта конфигурация очень проста, но она облегчает повседневную работу программиста и избавляет от проблемы забытых команд по работе с консолью.
Итоги
В этом материале мы рассказали о некоторых полезных командах для работы с консолью. Они позволяют, с помощью инструментов, являющихся частью современных браузеров, решать множество задач, которые сопутствуют разработке и отладке клиентских JavaScript-приложений.
Сегодня мы публикуем заметку, посвящённую особенностям использования JavaScript-консоли в браузерах, лежащим за пределами широко известной команды console.log() . Собственно говоря, эта команда представляет собой простейший инструмент для отладки программ, который позволяет выводить что-либо в консоль. Однако знание некоторых особенностей этого инструмента позволит тем, кто им пользуется, повысить эффективность работы.
Команда console.log() и имена переменных
Простейший вариант использования console.log() заключается, например, в выводе некоей строки или объекта. Например, выведем в консоль строку:
Теперь представим себе, что в консоль нужно вывести несколько объектов. Например — таких:
Пожалуй, логичнее всего будет воспользоваться для решения этой задачи несколькими командами вида console.log(variable) . Хотя данные в консоль и попадают, при их выводе понятной становится одна проблема.
Взглянем на то, что выводится в консоль.
В консоли нет имён переменных
Как можно видеть, имён переменных, foo и bar , здесь нет. Объекты, пользуясь значком в виде стрелки в левых частях строк, можно разворачивать, но даже так, глядя на внутреннюю структуру объектов, понять, какой именно объект выведен в консоль, может быть весьма непросто. В решении этой проблемы нам помогут вычисляемые имена свойств объектов. А именно, эта особенность объектных литералов, появившаяся в ES6, позволяет пользоваться удобной конструкцией следующего вида:
При таком подходе в консоль попадёт объект, имена свойств которого будут представлять собой имена переменных-объектов, которые нужно вывести. Кроме того, это позволяет избавиться от некоторых вызовов console.log() , используемых ранее для вывода объектов по отдельности.
Команда console.table()
Улучшать внешний вид того, что программа выводит в консоль, можно и дальше, оформив содержимое объектов в виде таблицы. Это хорошо скажется на читаемости информации. А именно, речь идёт о том, что если вы выводите в консоль объекты с одинаковыми именами свойств, или массивы похожих объектов, вы можете воспользоваться командой console.table() . Вот как выглядит результат выполнения команды вида console.table(< foo, bar >) .
Команда console.table() в действии
Команда console.group()
Эту команду можно использовать в том случае, если нужно сгруппировать некие связанные данные и создать структуры из вложенных групп, которые повышают удобство работы с такими данными.
Кроме того, этот подход можно использовать в тех случаях, когда в некоей функции выполняется несколько команд вывода чего-либо в консоль, и нужно, чтобы можно было бы чётко, с одного взгляда, отделить результаты выполнения таких команд от других.
Предположим, мы выводим в консоль сведения о неких пользователях:
Вот как выглядят результаты работы этого кода.
Группировка результатов работы команд вывода данных в консоль
При использовании команды console.group() группы, по умолчанию, выводятся в развёрнутом виде. Для того, чтобы они выводились свёрнутыми, вместо этой команды можно воспользоваться командой console.groupCollapsed() . Для того, чтобы просмотреть содержимое такой группы, её понадобится развернуть с помощью значка, находящегося слева от имени группы.
Команды console.warn() и console.error()
Предупреждения и ошибки
Тут же можно настраивать и другие CSS-свойства текста, наподобие font-size и font-style .
Стилизация данных, выводимых в консоль
Команда console.trace()
Команда console.trace() выводит в консоль результаты трассировки стека и позволяет судить о том, что произошло в определённом месте программы во время её выполнения. Например, существуют некоторые методы, которые, в определённых ситуациях, нужно вызывать лишь один раз, скажем — методы для удаления информации из базы данных. Проверить, действительно ли выполняется лишь однократный вызов подобного метода, можно с помощью console.trace() . Эта команда позволяет вывести в консоль сведения, которые помогают проконтролировать правильность работы внутренних механизмов программ.
Команда console.time()
Одна из важных задач, встающая перед фронтенд-разработчиком, заключается в том, чтобы обеспечить высокую скорость работы кода. Команда console.time() позволяет замерять время выполнения операций и выводить то, что удалось выяснить, в консоль. Например, исследуем с помощью этой команды пару циклов:
Взглянем на то, что попало в консоль после выполнения этого кода.
Результаты использования console.time()
Итоги
В этом материале мы рассмотрели некоторые полезные мелочи, касающиеся вывода данных в консоли браузеров. Если раньше вы об этих возможностях не знали — надеемся, теперь у вас появились новые полезные JavaScript-инструменты.
Читайте также: