Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   В этом мире есть УДОБНЫЙ инструмент для написания Javascript-скриптов? (https://javascript.ru/forum/misc/77466-v-ehtom-mire-est-udobnyjj-instrument-dlya-napisaniya-javascript-skriptov.html)

exec 09.05.2019 21:38

В этом мире есть УДОБНЫЙ инструмент для написания Javascript-скриптов?
 
Когда-то давно был браузер Opera Presto с замечательной функцией редактирования исходного кода страницы на лету, и в нем я писал все свои скрипты. Очень удобно: нажал Ctrl-U, написал код, нажал "Применить изменения" - и готово. Особенно это полезно было, когда пишешь под какой-то сайт (флудер для форума, например, или сбор какой-то информации, которую вручную никак не собрать).

Но к сожалению, этот браузер смертельно устарел, и сейчас в нем не работает и половины сайтов. Посмотрел, как пишут другие - ну это просто мазохизм, открывать исходник в атоме или другом редакторе, писать код, а при каждом изменении - сначала сохранять файл, потом переключаться на браузер и там обновлять страницу. А если я пишу, к примеру, тот же флудер для форума, то вообще приходится сначала набирать код в редакторе, потом вставлять его в консоль, и так при каждом изменении... Столько лишних кликов, только из-за этого разработка замедляется минимум в два раза.

Есть ли какие-то адекватные инструменты для написания кода на JS? Чтобы сразу видеть результат после каждой правки, как было в старой опере. Может, это какой-то аддон, который позволяет править код на лету, или еще что-то, я не знаю.

Malleys 10.05.2019 16:41

Цитата:

Сообщение от exec
сначала сохранять файл, потом переключаться на браузер и там обновлять страницу.

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

Песочница. Вы можете писать код в песочнице и сразу наблюдать изменения... Например, CodeSandBox, Codepen, Dabblet и др.

Вы можете использовать Chrome DevTools, чтобы написать какой-то код, и применить его к вашей странице.

Chrome DevTools, 1-ый способ. Перейдите во вкладку «Sources», затем в левой панели выберите «Snippets», затем нажмите кнопку «➕ New snippet». В открывшейся вкладке напишите ваш JavaScript-код. Чтобы запустить его, нажмите Cmd+Enter.

Chrome DevTools, 2-ой способ. Перейдите во вкладку «Sources», затем в левой панели выберите «Filesystem», затем нажмите кнопку «➕ Add folder to workspace». В открывшейся программе выберите папку с вашим проектом (например, file:///media/project/). После выбора папки в левой панели появится иерархия вашей папки, вы можете выбирать файл и менять его. Сохранить изменения в файловую систему Cmd+S, чтобы применить изменения Cmd+R (для CSS изменения происходят в живую, но нажмите Cmd+S, чтобы их сохранить!) в браузере вы увидите эти изменения на экране как из локального файла (например, file:///media/project/index.html), так и из удалённого файла (например, h​t​t​p​s​:/​/​localhost/index.html)

Brackets. Также вы можете использовать редактор Brackets, в котором вы можете получить соединение в реальном времени с вашим браузером Google Chrome. Внесите изменения в CSS и HTML, и вы сразу увидите эти изменения на экране. Чтобы увидеть изменения в JavaScript, cохраните его!

Системы сборки. Вы увидите изменения на экране почти сразу после сохранения файла. Например, parcel, webpack, rollup, и др.

рони 10.05.2019 21:49

Malleys,
:thanks:


Часовой пояс GMT +3, время: 23:07.