Консоль разработчика
Код уязвим для ошибок. И вы, скорее всего, будете делать ошибки в коде… Впрочем, давайте будем откровенны: вы точно будете совершать ошибки в коде. В конце концов, вы человек, а не робот.
Но по умолчанию в браузере ошибки не видны. То есть, если что-то пойдёт не так, мы не увидим, что именно сломалось, и не сможем это починить.
Для решения задач такого рода в браузер встроены так называемые «Инструменты разработки» (Developer tools или сокращённо — devtools).
Chrome и Firefox снискали любовь подавляющего большинства программистов во многом благодаря своим отменным инструментам разработчика. Остальные браузеры, хотя и оснащены подобными инструментами, но всё же зачастую находятся в роли догоняющих и по качеству, и по количеству свойств и особенностей. В общем, почти у всех программистов есть свой «любимый» браузер. Другие используются только для отлова и исправления специфичных «браузерозависимых» ошибок.
Для начала знакомства с этими мощными инструментами давайте выясним, как их открывать, смотреть ошибки и запускать команды JavaScript.
Google Chrome
В её JavaScript-коде закралась ошибка. Она не видна обычному посетителю, поэтому давайте найдём её при помощи инструментов разработки.
Нажмите F12 или, если вы используете Mac, Cmd + Opt + J .
По умолчанию в инструментах разработчика откроется вкладка Console (консоль).
Она выглядит приблизительно следующим образом:
Точный внешний вид инструментов разработки зависит от используемой версии Chrome. Время от времени некоторые детали изменяются, но в целом внешний вид остаётся примерно похожим на предыдущие версии.
- В консоли мы можем увидеть сообщение об ошибке, отрисованное красным цветом. В нашем случае скрипт содержит неизвестную команду «lalala».
- Справа присутствует ссылка на исходный код bug.html:12 с номером строки кода, в которой эта ошибка и произошла.
Под сообщением об ошибке находится синий символ > . Он обозначает командную строку, в ней мы можем редактировать и запускать JavaScript-команды. Для их запуска нажмите Enter .
Обычно при нажатии Enter введённая строка кода сразу выполняется.
Чтобы перенести строку, нажмите Shift + Enter . Так можно вводить более длинный JS-код.
Теперь мы явно видим ошибки, для начала этого вполне достаточно. Мы ещё вернёмся к инструментам разработчика позже и более подробно рассмотрим отладку кода в главе Отладка в браузере.
Firefox, Edge и другие
Инструменты разработчика в большинстве браузеров открываются при нажатии на F12 .
Их внешний вид и принципы работы мало чем отличаются. Разобравшись с инструментами в одном браузере, вы без труда сможете работать с ними и в другом.
Safari
Safari (браузер для Mac, не поддерживается в системах Windows/Linux) всё же имеет небольшое отличие. Для начала работы нам нужно включить «Меню разработки» («Developer menu»).
Откройте Настройки (Preferences) и перейдите к панели «Продвинутые» (Advanced). В самом низу вы найдёте чекбокс:
Теперь консоль можно активировать нажатием клавиш Cmd + Opt + C . Также обратите внимание на новый элемент меню «Разработка» («Develop»). В нем содержится большое количество команд и настроек.
Итого
- Инструменты разработчика позволяют нам смотреть ошибки, выполнять команды, проверять значение переменных и ещё много всего полезного.
- В большинстве браузеров, работающих под Windows, инструменты разработчика можно открыть, нажав F12 . В Chrome для Mac используйте комбинацию Cmd + Opt + J , Safari: Cmd + Opt + C (необходимо предварительное включение «Меню разработчика»).
Теперь наше окружение полностью настроено. В следующем разделе мы перейдём непосредственно к JavaScript.
Как редактировать Javascript в браузере?
Я искал способ редактировать JavaScript в браузере, таком как Firefox, на лету и запускать его. Firebug позволяет нам редактировать HTML и CSS «на лету», но JavaScript — это боль. Я должен вернуться к источнику и изменить его.
Я не понимаю, почему инструменты разработчика браузера не позволяют редактировать. Есть способ сделать это?
[Обновление]: отмечен новым ответом в 2015 г.
- IE теперь предоставляет один из лучших способов разработки / отладки
- Chrome предоставляет IntelliSense при написании javaScript, что здорово
- FF работает так же, как 2010 .
Можно использовать все три консоли браузера (Firefox, Internet Explorer и Chrome) для обновления существующей функции: скажем, у меня была функция a() который раньше делал console.log (‘a’), я могу перейти в консоль, переопределить функцию a() as alert(‘a’) и выполните его еще раз, чтобы увидеть окно предупреждения.
Когда я задал этот вопрос в 2010 году, браузеры не так хорошо справлялись с отладкой JavaScript, а также я, вероятно, не знал, что функцию можно заменить на лету.
7 ответы
В Chrome: Откройте Chrome DevTools -> панель «Источники», перейдите в левую панель навигации или нажмите Ctrl + O для открытия файлов, содержащихся на странице.
Затем вы можете отредактировать файл и нажать Ctrl + S чтобы сохранить изменение и посмотреть, что произойдет с новыми кодами. Я обычно делаю это с помощью контрольные точки.
Если вы выполняете отладку и хотите сохранить изменения в локальной файловой системе, вы можете щелкнуть правой кнопкой мыши по навигации и выбрать Добавить папку в рабочую область:
В таком случае, если вы сохраните изменения в DevTools, соответствующий файл в вашей файловой системе также будет обновлен.
Например, я добавляю папку в рабочее пространство, в ней есть 1.js:
Затем я редактирую JS-файл в DevTools, изменения немедленно обновляются в локальной файловой системе:
ответ дан 25 апр.
знаете ли вы, можно ли автоматически загружать эти изменения каждый раз, когда вы повторно посещаете веб-страницу? — Рубен Марреро
Что касается настойчивости, вам, вероятно, придется клонировать сайт в свою систему локально и перейти оттуда. — кпие
Конечно, я обнаружил, что Execute JS (для firefox) временами может быть полезен, и я думаю, что это то, что вы ищете:
Он позволяет просматривать и изменять Javascript на вашей странице.
ответ дан 01 апр.
ой. я уже заходил на этот URL раньше . он не будет работать с FIrefox 3.6 .. 🙁 — Амит
Интересно, что довольно много расширений, похоже, не работают с последней версией (-ами) firefox . — Джон Онстотт
Это расширение, похоже, больше не поддерживается, и я не мог заставить его работать. — static_rtti
В Chrome есть довольно сильная функция для внесения изменений в JS-код. Вы в основном устанавливаете несколько точек останова и после нажатия редактируете JS по своему желанию. Дополнительная информация и демонстрация — где Пол Айриш исправляет битую страницу.
В случае FF вы можете использовать версия для разработчиков:
Отладчик JavaScript Остановите, пошагово, изучите и измените JavaScript, работающий на странице.
ответ дан 18 апр.
Есть идеи, почему Firefox не предлагает эту функцию? Я хочу использовать Chrome, но, поскольку я в основном использую Firefox, было бы неплохо решить эту проблему. — static_rtti
@static_rtti ищет developer.mozilla.org/en-US/docs/Инструменты в версии для разработчиков FF: JavaScript Debugger Stop, step through, examine and modify the JavaScript running in a page. Но я в основном использую хром. — Артур Гжесяк
Chrome предоставляет отличные возможности для редактирования javascript в браузере
Шаг 1. Запустите инструмент разработки. Откройте Chrome, загрузите страницу из локальной файловой системы / сервера и откройте Инструменты разработчика из меню «Инструменты» или нажмите Ctrl + Shift + I / Cmd + Shift + I. Перейдите на вкладку «Источник», затем щелкните значок «Источники» или нажмите Ctrl + O, чтобы выбрать файл JavaScript.
setp2: Edit Теперь вы можете сразу перейти к редактированию кода. Chrome также предлагает список полезных функций, которые помогут вам найти нужную строку — нажмите Ctrl + Shift + O / Cmd + Shift + O.
step3: Сохранить Нажмите Ctrl + S / Cmd + S, чтобы сохранить изменения. Это обновляет файл в памяти и немедленно применяет изменения. Примечание однако этот код не запускается снова, поэтому изменения в переменных инициализации не будут затронуты..
Чтобы сохранить изменения в исходном файле, щелкните правой кнопкой мыши редактор и выберите Сохранить или Сохранить как…. После этого вы можете обновить страницу, и скрипт перезапустится.
step4: Отменить. Вызвало ли обновление проблему? Щелкните правой кнопкой мыши редактор и выберите Локальные изменения…. На нижней панели отображаются все недавние изменения и можно вернуться назад.
Firefox предоставляет еще один инструмент для редактирования javascript в браузере
setp1: Запуск Scratchpad Чтобы открыть окно Scratchpad, нажмите Shift F4 или перейдите в меню Web Developer (которое является подменю в меню Tools в OS X и Linux), затем выберите Scratchpad. Откроется окно редактора Блокнота. Оттуда вы можете сразу же начать писать код JavaScript, чтобы попробовать.
step2: Edit Меню File предлагает опции для сохранения и загрузки фрагментов кода JavaScript, так что вы можете повторно использовать код позже, если хотите. Информация о завершении кода и типе доступна только в Firefox 32 и новее. Чтобы вывести список предложений автозаполнения, нажмите Ctrl пробел. Чтобы отобразить всплывающее окно, нажмите Shift Space в Firefox 32 или Ctrl Shift Space в Firefox 33+.
Шаг 3: Выполнение После того, как вы написали свой код, выберите код, который хотите запустить. Если ничего не выбрать, будет запущен весь код в окне. Затем выберите способ запуска кода, используя кнопки вверху, используя меню «Выполнить» или контекстное меню. Код выполняется в рамках текущей выбранной вкладки. Любые переменные, которые вы объявляете вне функции, будут добавлены к глобальному объекту для этой вкладки.
Как редактировать исходные файлы прямо в Chrome
Хотя такие инструменты, как «живая» перезагрузка, упростили этот процесс, многие разработчики продолжают настраивать код как в DevTools, так и в их редакторе.
Тем не менее, можно открывать и редактировать исходные файлы непосредственно в Chrome. Любые сделанные вами изменения сохраняются в файловой системе и обновляются в редакторе (при условии, что они обновляются при изменении файла ).
Шаг 1: Запустите инструменты разработчика
Откройте Chrome, загрузите страницу из локальной файловой системы / сервера и откройте Инструменты разработчика из меню « Дополнительные инструменты» или нажмите F12 или Ctrl / Cmd + Shift + I, в зависимости от вашей системы. Перейдите на вкладку « Источники », чтобы проверить файловый менеджер:
В этом представлении вы можете открывать и редактировать файлы CSS и JavaScript, но любые изменения будут потеряны, как только вы обновите страницу.
Шаг 2. Свяжите папку с рабочей областью
Перейдите на вкладку « Файловая система », затем нажмите « + Добавить папку в рабочую область» . Вам будет предложено найти вашу рабочую папку, и Chrome попросит вас подтвердить, что вы разрешите доступ. Проводник показывает файлы в вашей системе, которые можно открыть одним щелчком мыши:
Шаг 3: отредактируйте и сохраните ваш код
Теперь вы можете перейти и редактировать свой код. Несохраненные изменения помечаются звездочкой на вкладке файла.
Изменения CSS мгновенно обновляются, но, в случае HTML и JavaScript, вам обычно нужно нажать Ctrl / Cmd + S, чтобы сохранить файл в файловой системе, а затем обновить браузер.
Обратите внимание, что вы также можете щелкнуть правой кнопкой мыши вкладку файла и выбрать « Сохранить как…», чтобы сохранить копию файла в другом месте.
Шаг 4. Просмотр и отмена изменений
Чтобы просмотреть изменения, щелкните правой кнопкой мыши вкладку файла и выберите Локальные изменения … из контекстного меню:
Дифференциальный вид показан. Значок стрелки в нижнем левом углу панели отменяет все изменения и возвращает файл в исходное состояние.
Инструменты разработчика Chrome никогда не станут полной заменой вашего любимого редактора, но могут быть полезны, когда вы делаете быстрые изменения или работаете с другого компьютера, на котором ваш редактор может быть не установлен.
How do you edit Javascript in the browser?
I was looking for a way to edit JavaScript in a browser, such as Firefox, on the fly and execute it. Firebug allows us to edit HTML and CSS on the fly but JavaScript is a pain. I have to go back to the source and modify that.
I don’t understand why the browser developer tools don’t allow editing. Is there a way to do it?
[Update]: Marked a new answer in 2015
- IE now provides one of the best dev/debugging experience
- Chrome provides IntelliSense while writing javaScript, which is cool
- FF works the same way as 2010.
One can use all three (Firefox, Internet Explorer, and Chrome) browser consoles to update an existing function: say I had a function a() which used to do console.log(‘a’), I can go to console, redefine the function a() as alert(‘a’) and execute it again to see an alert box.
When I had asked this question in 2010, browsers were not so great at debugging JavaScript and also I was probably unaware that a function can be replaced on the fly.
8 Answers 8
In Chrome: Open Chrome DevTools -> Sources panel, browse in left navigation, or press Ctrl + O to open files included in the page.
Then you can edit the file and press Ctrl + S to save the change, and see what happens with the new codes. I usually do it with the help of break points.
If you are debugging and want to save the changes to your local file system, you could right click on the navigation, and select Add folder to workspace:
In such case, if you save your changes in DevTools, the relevant file in your file system will be updated as well.
For example I add a folder to workspace, in it there is a 1.js:
Then I edit the JS file in DevTools, the change is updated in local file system immediately:
Sure, I found Execute JS (for firefox) to be helpful at times, and I think it’s what you’re looking for:
It lets you view and modify Javascript on your page.
Chrome has a pretty strong feature for making changes to JS code. You basically set some breakpoints and once hit you edit JS at your will. More info and demo — where Paul Irish fixes a broken page.
In case of FF you can use Developer Edition:
JavaScript Debugger Stop, step through, examine and modify the JavaScript running in a page.
Chrome provides an excellent facility to edit the javascript in the browser
step1: Launch the development tool Open Chrome, load a page from your local file system/server and open Developer Tools from the Tools menu or press Ctrl+Shift+I / Cmd+Shift+I. Navigate to the Source tab then either click the Sources icon or hit Ctrl+O to select your JavaScript file
setp2:Edit You can now jump straight in and edit your code. Chrome also offers a useful function list to help you locate the right line — press Ctrl+Shift+O / Cmd+Shift+O
step3:Save Hit Ctrl+S / Cmd+S to save your changes. This updates the file in memory and applies the changes immediately. Note however, that code won’t start again so changes to initialization variables won’t be affected.
To save the changes to the original file, right-click the editor and select Save or Save As…. Once done, you can refresh the page and the script will restart
step4: Undo Did your update cause problem? Right-click the editor and select Local modifications…. The lower pane displays all recent changes and allows you to revert back.
Firefox provides another tool to edit javascript in the browser
setp1: Launch Scratchpad To open the Scratchpad window, press Shift F4, or go to the Web Developer menu (which is a submenu in the Tools menu on OS X and Linux), then select Scratchpad. This will open up a Scratchpad editor window. From there you can immediately start writing some JavaScript code to try.
step2: Edit The File menu offers options to save and load JavaScript code snippets, so you can reuse code later if you like.Code completion and type information is only available from Firefox 32 onwards. To list autocomplete suggestions, press Ctrl Space. To show the popup, press Shift Space in Firefox 32 or Ctrl Shift Space in Firefox 33+.
step3:Execution Once you’ve written your code, select the code you want to run. If you don’t select anything, all the code in the window will be run. Then choose the way you want the code to run using the buttons along the top, using the Execute menu, or using the context menu. The code is executed in the scope of the currently selected tab. Any variables you declare outside of a function will be added to the global object for that tab.