Javascript.RU

Подбираем инструментарий

Update: Более новый материал по этой теме находится по адресу https://learn.javascript.ru/tools.

Как и в любом другом деле - инструменты всякие нужны и важны.

Настоящему будущему гуру обязательно надо поставить

  • а) правильный браузер
  • б) правильное средство отладки
  • в) правильный редактор

Firefox лучше всех поддерживает стандарты. Обычно разработка начинается под Firefox, а когда под ним все работает - подчищаются несовместимости с остальными браузерами.

Firebug помогает разобраться с ошибками javascript, посмотреть и тут же исправить CSS/DOM, и многое другое.

В качестве редактора под Windows - попробуйте SciTe, под Linux - Quanta или vim.

Конечно, и другие редакторы подойдут, главное - подсветка JS-кода. В статье рассмотрен SciTe просто для примера, если до этого Вы пользовались Notepad или чем-то похожим по отсутствию возможностей

Узнать об отладке в Opera, IE и подобрать дополнительные инструменты из сундучка по отладке можно будет потом, по мере надобности.

На этом видео проиллюстрирована установка Firefox и подключение Firebug.

Здесь показана установка редактора SciTe, создание в нем файлов.

Также видно, как удобно отлавливать ошибку в Firebug.

P.S. Видео не на YouTube, а в виде скачиваемых файлов - для лучшего качества.

Большое количество различных инструментов для разработки и отладки находится в сундучке с инструментами. Обязательно загляните туда на досуге.


Автор: Stas (не зарегистрирован), дата: 27 июня, 2008 - 15:37
#permalink

Лично я пользуюсь очень удобным, мощным и бесплатным редактором Aptana под Eclipse


Автор: Крамольный (не зарегистрирован), дата: 3 июля, 2008 - 11:58
#permalink

А Zend прокатит? Что-то скайт этот мне не особо приглянулся...


Автор: AzriMan (не зарегистрирован), дата: 16 февраля, 2009 - 15:40
#permalink

Да, конечно, прокатит, особенно учитывая, что Zend редактор платный, как таковой, а SciTE бесплатный


Автор: Илья Кантор, дата: 3 июля, 2008 - 23:38
#permalink

Пишите, пожалуйста, о Ваших редакторах и их преимуществах в "сундучке": Редакторы javascript.


Автор: Гость (не зарегистрирован), дата: 4 июля, 2008 - 12:53
#permalink

Спасибо, статья очень помогла.


Автор: Гость (не зарегистрирован), дата: 10 августа, 2008 - 10:45
#permalink

Про редакторы. Я обычно пользуюсь vim. А под Windows использую Notepad++.


Автор: Гость (не зарегистрирован), дата: 3 сентября, 2010 - 09:44
#permalink

Я тоже использую именно эти редакторы. Пользуюсь ими уже много лет. Пробовал разные редакторы но всегда возвращался к vim и notepad++


Автор: popov654, дата: 17 августа, 2011 - 10:32
#permalink

Я больше люблю GridinSoft Notepad за интерфейс и подсветку. Но он платный


Автор: Гость (не зарегистрирован), дата: 5 февраля, 2011 - 22:35
#permalink

спасибо шеф!!
ты открыл людям глаза на редакторы и ide вцелом, круче НЕТУ!
ДЛЯ ОДАРЕННЫХ НАПИСАНО
со своими редакторами валить в другой раздел


Автор: Sh0dan (не зарегистрирован), дата: 31 августа, 2008 - 00:55
#permalink

Aptana однозначно рулит. Очень хорошо заточена под JS, HTML, CSS.


Автор: Cергей (не зарегистрирован), дата: 31 августа, 2008 - 16:49
#permalink

Спасибо за Firebug!Классная шняга!!!


Автор: Гость (не зарегистрирован), дата: 3 сентября, 2008 - 20:22
#permalink

Firebug-ом пользуюсь столько сколько верстаю, рульная вещь =) а редактор мне не приглянулся совсем


Автор: Dekker8, дата: 5 сентября, 2008 - 22:40
#permalink

Не знаю как насчет редактора мне больше всего нравится Adobe Dreamweaver


Автор: JS Гость (не зарегистрирован), дата: 14 сентября, 2008 - 11:59
#permalink

Ну не знаю, чаще пишу hta apllication и я привык блокнотом редактировать.
Но, пишу как умею.


Автор: Гость (не зарегистрирован), дата: 24 сентября, 2008 - 17:58
#permalink

Чем можно еще дебажить Java Script?


Автор: Гость (не зарегистрирован), дата: 24 октября, 2008 - 08:12
#permalink

Developer Tools в IE8 аналог Firebug'a


Автор: IzumeRoot, дата: 30 октября, 2008 - 17:39
#permalink

Под linux в качетсве редактора и даже IDE - kwrite, gedit, jseclipse


Автор: Barrio, дата: 3 ноября, 2008 - 18:45
#permalink

ага Adobe Dreamweaver - самый лучший редактор для всего, что только можно редактировать, всем советую!


Автор: Гость (не зарегистрирован), дата: 26 мая, 2011 - 12:36
#permalink

А мне не нравится dreamweaver, неудобная подсветка и вобще не нравится... ИМХО


Автор: Dudin (не зарегистрирован), дата: 14 декабря, 2008 - 18:51
#permalink

А видео то не пашет...


Автор: Илья Кантор, дата: 15 декабря, 2008 - 11:09
#permalink

Чего не пашет? Подробнее багрепорт, пожалуйста.


Автор: Gorini4 (не зарегистрирован), дата: 25 января, 2009 - 23:30
#permalink

Требует кодек. Хотя K-Lite стоит


Автор: Yury (не зарегистрирован), дата: 7 февраля, 2009 - 01:21
#permalink

может ли firebug сохранять измененный файл, у меня что-то не получается


Автор: Илья Кантор, дата: 7 февраля, 2009 - 07:29
#permalink

не может


Автор: copyhold (не зарегистрирован), дата: 6 января, 2011 - 09:26
#permalink

есть web developer tool bar для фокса. В ней можно посмотреть сгенерённый код. И его , соответсвенно, сохранить.


Автор: max_04, дата: 11 февраля, 2009 - 15:59
#permalink

помогите!почему в firebug окне там где script не показывает исходный код файла js а пишет Failed to load source for sourceFile top-level http://localhost/ajax/test.js script.tags( X| 1313 )


Автор: Гость (не зарегистрирован), дата: 15 февраля, 2009 - 11:15
#permalink

У меня такая же шняга, кстати; только FireBug пишет:

(1) Failed to load source for sourceFile URLOnly file:///C:/Site1/index.html script.tags( )

... во вкладке 'Script'. Эту строчку (1) можно отлаживать, установив на неё прерывания, только вот всё равно безсмысленно, так как исходный код посмотреть всё равно не получается.

Кстати: как отлаживать и посмотреть в FireBug код, подключённый через тэг <script src="(исходник).js"> при такой ошибке? Это баг, конфликт плагинов в Firefix или я чего-то не понял?

Подсобите, кто знает.

Обидно: кнопочки отладки на экране виднеются, а воспользоваться ими не получается...

В чём тут дело?


Автор: Гость (не зарегистрирован), дата: 15 февраля, 2009 - 13:18
#permalink

Дело в том, что FireBug требует, чтобы файлы, содержащие символы, кодирующие русские буквы, расположенные в комментариях/текстовых литералах программы JavaScript, сохранённой в файле .js, или в комментариях/текстовых значениях свойств html-тегов, содержащихся в html-файле, были записаны на диск из Блокнота (Notepad.exe) в Windows не в формате ANSI; если .js-файл/.html-файл содержит символы, кодирующие русские буквы, даже в указанных местах соответствующей (.js- или .html-) грамматики, содержащий такие русские символы упомянутый .js-/.html-файл корректно загружается, распознаётся, отражается (и исполняется, если это .js-файл) Браузером (во всяком случае, Mozill'ой 3.0.+ и Internet Explorer'ом 6.0.+), но некорректно (с ошибкой "Failed to load source for sourceFile <и т.д.>") отображется plug-in'ом FireBug (по крайней мере, той версией, которая установлена у меня - а это FireBug 1.3.2).

Мне помогло избавить дебаггер FireBug'а от этого надоедливого сообщения ("Failed to load source for sourceFile <и т.д.>") пересохранить весь сайт из Блокнота (Notepad.exe) Windows XP в кодировке UTF-8.

Возможно, кто-то знает и другие способы избавиться от отсутствия текста, впрочем, хорошо исполняемого в Браузере, исходного файла в FireBug'е, или, быть может, другие причины ошибки "Failed to load source for sourceFile <и т.д.>" - или более быстрые, чем по-файловое открытие в Блокноте Windows, способы перекодировать web-сайт целиком в формат (например, UTF-8), хорошо понимаемый FireBug'ом, для начинающего отлаживать свой сайт впервые из под Windows.

Пишите ответ здесь.

А вообще сайтище полезный - если б не эта досадная маленькая "ошибка" в FireBug, из-под Windows цены бы ему не было.


Автор: Андрей Параничев, дата: 25 февраля, 2009 - 04:46
#permalink

Последняя версия багнутая, часто слетает (например на нашем форуме). Думаю исправят к следующему релизу.


Автор: Гость (не зарегистрирован), дата: 19 мая, 2009 - 16:36
#permalink

Лучшеб на Ютуб видео пихнул, качать не охота.


Автор: dzyanis, дата: 8 июня, 2009 - 18:10
#permalink

Насчет среды. Лично я пишу под NetBeans, работает и под Windows и под Linux. До этого писал на ZendStudio. NB лучше!


Автор: Anton86 (не зарегистрирован), дата: 24 сентября, 2009 - 12:19
#permalink

Давно уже FireFox не лучше всех поддерживает стандарты. К слову, на данный момент, тест на соответствие стандартов Opera проходит, а FireFox 3.5 лишь на 96%. Это я не к тому, что нужно писать что опера лучше всех блюдет стандарты, но я б либо убрал голословное утверждение, либо перечислил бы все браузеры, которые более менее блюдут стандарты, а именно, FF, Opera, Chrome, Safari, IE8.


Автор: Гость (не зарегистрирован), дата: 24 сентября, 2009 - 12:19
#permalink

Я про ACID 3


Автор: Гость (не зарегистрирован), дата: 28 сентября, 2009 - 13:00
#permalink

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


Автор: Гость (не зарегистрирован), дата: 16 октября, 2009 - 13:04
#permalink

NotePad лучше всех!


Автор: Nailgun (не зарегистрирован), дата: 18 ноября, 2009 - 12:06
#permalink

Кроме Firebug, рекомендую встроенные Developer Tools в браузере Chrome (Ctrl+Shift+J). По функциональности не уступает firebug. А так же его интерфейс работает пошустрее. Для моего нетбука это актуально.


Автор: Гость (не зарегистрирован), дата: 24 октября, 2011 - 16:45
#permalink

Поддерживаю про chrome, firebug очень тупит при работе со сложными скриптами (памяти жрет немерено при тестировании). У chrome есть очень удобная console для вывода переменных и задании команд - супер просто!


Автор: Tema Lavrov (не зарегистрирован), дата: 14 декабря, 2009 - 22:41
#permalink

а я сколько себя помню сидел на Award-Winning IDE ActiveState Komodo 5 Pro, пусть она денег стоит, но она их стоит


Автор: Гость (не зарегистрирован), дата: 13 января, 2010 - 17:39
#permalink

некоторые редакторы на подобие Notepad++ вставляют в начало невидимые символы, которые могут сильно помешать... например, я учил работу с cookie в php из-за этого хедеры отсылались раньше и куки не устанавливались, так что редактор тоже надо грамотно подбирать) я лично вообще всё в блокноте)) с голыми руками на пулемёты, так сказать)


Автор: B@rmaley.e><e, дата: 13 января, 2010 - 18:18
#permalink

А кодировка какая была? У меня при сохранении в np++ заголовки отдаются нормально.


Автор: 1 (не зарегистрирован), дата: 16 января, 2010 - 14:29
#permalink

Лучше всего для написания HTML страниц использовать Notepad++, несоглашусь с тем, кто его нелюбит


Автор: @Hunter@ (не зарегистрирован), дата: 2 февраля, 2010 - 18:43
#permalink

лучше всех поддерживает стандарты. Обычно разработка начинается под Firefox, а когда под ним все работает - подчищаются несовместимости с остальными браузерами.

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


Автор: @Hunter@ (не зарегистрирован), дата: 2 февраля, 2010 - 18:49
#permalink

Конечно, и другие редакторы подойдут, главное - подсветка JS-кода. В статье рассмотрен SciTe просто для примера, если до этого Вы пользовались Notepad или чем-то похожим по отсутствию возможностей

Notepad ++ последней версии очень достойный вариант, если вы занялись JS даю руку на отсечение что дело дойдет и до PHP, либо Perl'a а так же языка запросов к БД SQL, тут и пригодится редактор поддерживающий подсветку синтаксиса нескольких языков, notepad++ знает синтаксис более 50 языков включая все вышеперечисленные


Автор: zm8, дата: 4 февраля, 2010 - 11:47
#permalink

notepad++ - это же несерьёзно. юзаю Eclipse + Spket на линуксе и винде, устраивает почти всё, хороший поиск/замена по регуляркам.
хромает Outline, к примеру, если в методе объекта есть такой блок кода

switch (onCellRender({
			rendering : this,
			renderOptions : options,
			currRow : r,
			currCol : c
		})) {
	case 'BREAK_CELL_RENDER' :
		break colsLoop;
	/* ... */
}

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

----------------------------------------
window.open(window.location);


Автор: ГостьЯ (не зарегистрирован), дата: 5 февраля, 2010 - 20:40
#permalink

Использую PrimalScript, устраивает во всём=)


Автор: Сумрак (не зарегистрирован), дата: 15 февраля, 2010 - 18:05
#permalink

На мой взгляд самы лучший редактор кода для любого языка Notepad++. Я в нем и сайты, и обычные проги на C++ и на Pascаle пишу))


Автор: pilot, дата: 7 марта, 2010 - 00:29
#permalink

пользуюсь netbeans, и бесплатно и удобно)


Автор: Гость (не зарегистрирован), дата: 10 апреля, 2010 - 02:19
#permalink

Странно почему то

"Запуск номер 1"
...
"Запуск номер N"
появляется не с первого раза


Автор: Resurgent (не зарегистрирован), дата: 28 апреля, 2010 - 17:47
#permalink

У каждого свои представления об идеальном редакторе.
Кому то Блокнот в самый раз, а кому то продукт компании ADOBE слишком прост.
[ИМХО] Советовать советуйте, но не надо пытаться об___рать других!


Автор: WIngpilot (не зарегистрирован), дата: 6 мая, 2010 - 23:15
#permalink

Пользуюсь Crimson Editor для HTML/PHP/JavaScript кода (http://www.crimsoneditor.com/) и TopStyle Lite для CSS (http://topstyle.en.softonic.com/).


Автор: kuznec'off (не зарегистрирован), дата: 23 августа, 2010 - 13:00
#permalink

А чем вам dreamweaver не угодил?..)


Автор: Anonimus01Ы (не зарегистрирован), дата: 24 августа, 2010 - 21:31
#permalink

А по мне, так лучше всего Nvu - визуально отредактировал тексты, потом в Notepad++ подправил. Если страниц с изменением много - есть Perl.


Автор: Гость (не зарегистрирован), дата: 22 сентября, 2010 - 16:09
#permalink

А в Dreamwaver разве низя? Тоже очнь неплох вроде бы.


Автор: Гость (не зарегистрирован), дата: 21 ноября, 2010 - 13:24
#permalink

блокнот - самое то, что хорошо научит


Автор: poorking, дата: 7 декабря, 2010 - 22:25
#permalink

Я для всего пользуюсь notepad++


Автор: Гость (не зарегистрирован), дата: 25 декабря, 2010 - 01:29
#permalink

Люди, а ктонибудь вобще пробовал на MS visual studio писать???
у меня просто друг на нем все что угодно пишет


Автор: Гость (не зарегистрирован), дата: 11 января, 2011 - 09:26
#permalink

И не только твой друг.


Автор: iprog (не зарегистрирован), дата: 22 июля, 2011 - 19:07
#permalink

Да, я как раз пытаюсь отладить скрипты для своего сайта на VS 2008.

А так пишу в Блокноте и потом произвожу отладку в Firefox'е (инструментом Веб-консоль - обновление страницы - смотрю, какие ошибки в скриптах найдены )


Автор: Гость (не зарегистрирован), дата: 25 декабря, 2010 - 01:31
#permalink

Лично я почемуто на PSPad подсел


Автор: Гость (не зарегистрирован), дата: 6 октября, 2013 - 17:35
#permalink

даааааааааааааа PSPad рулит!!!!


Автор: s-product (не зарегистрирован), дата: 18 апреля, 2011 - 17:05
#permalink

Поставил firebug на Firefox 4.
Очень долго маялся: то ошибку не показывает, то правильный вариант показывает как ошибку. Скрипт виснет.

В Опере-11 (меню > страница > средства разработки > консоль ошибок) и Гугль-хроме-10 (настройки > инструменты > консоль javascript) сразу показывает ошибку, если есть.

Резюме: Новичку лучше отлаживать Оперой или Гугль-хромом, а Лисой проверять и бродить по сети.


Автор: Гость (не зарегистрирован), дата: 4 июня, 2011 - 11:00
#permalink

почему то скаченное видео не читается(


Автор: Гость (не зарегистрирован), дата: 11 июня, 2011 - 19:52
#permalink

Я вобще пользуюсь PhPDesinger 7.Платный но всё в одном


Автор: Гость (не зарегистрирован), дата: 11 июня, 2011 - 20:20
#permalink

Скачал программу отлова ошибок. А он не активируется место кружка там жук серого цвета. что делать объясните.


Автор: jo-cry (не зарегистрирован), дата: 5 июля, 2011 - 10:05
#permalink

Пользуюсь очень удобными инструментами для разработки в Опере, Dragonfly, вызаваеться нажатием ctrl+shift+i, такойже комбинацией можно отктыть оналогичный инструмент в Хроме.


Автор: melky, дата: 26 августа, 2011 - 23:36
#permalink

еще можно через F12 открывать.


Автор: Гундарев Виктор, дата: 15 сентября, 2011 - 17:50
#permalink

Скачал и установил комплекс Microsoft Visual Studio Express для Web дизайна, это демо версия на 30дней. Посмотрел и учитывая что я уже немного освоил Adobe Dreamweaver возник вопрос. Кто знаком с обоими продуктами, подскажите плиз. На чем все-таки лучше заниматься Web дизайном (включая скрипты), на Microsoft Visual Studio или на Adobe Dreamweaver ?
Что не нравится в Adobe Dreamweaver, что нет средств для отладки Скриптов, хотя все остальное очень нравится. Правда я не знаю насколько удобен Microsoft Visual Studio, т.к. на нем не работал, зато в нем и средства для работы со Скриптами включая отладку, и с Базами Данных (как я понял при беглом осмотре).
Средства типа Блокнота, это не для меня :-) Мне нужен Визуальный редактор.
Извините за наивный вопрос новичка.


Автор: Гундарев Виктор, дата: 19 сентября, 2011 - 12:59
#permalink

Благодаря данным здесь на сайте инструкциям, наконец установил и настроил Microsoft Visual Studio Developer. Да, Microsoft Web платформа громоздка, но зато есть все, что только может понадобится для отладки скриптов. То что не получилось у меня отладить с помощью Firebug, с помощью Developer отладил без труда, т.к. есть пошаговый режим отладки. Правда как я понял из инструкций Microsoft, Microsoft Developer работает только при наличии лицензионного Windous. Но утверждать не могу, потому что у меня лицензионный Windous.


Автор: Гундарев Виктор, дата: 6 октября, 2011 - 01:46
#permalink

Пришел к выводу, что отладчики нужно иметь во всех браузерах, под которые отлаживаются скрипты. Как минимум в FireFox и в IE. Когда в одном браузере работает а в другом нет, нужен отладчик в том браузере , где скрипты не работают, чтобы их отладить.


Автор: petrovloxnb, дата: 14 февраля, 2012 - 22:01
#permalink

как работать с javascript в NetBeans?


Автор: husa, дата: 19 марта, 2012 - 18:19
#permalink

Использую редактор Sublime Text 2. Советую посмотреть что это такое)


Автор: Гость (не зарегистрирован), дата: 26 сентября, 2012 - 12:39
#permalink

Для разработки диалоговых окон под Виндовс нужен визуальный редактор, который бы позволял на основе создаваемого визульного обхукте генерить соотв. код hta. Есть такой?


Автор: DC88 (не зарегистрирован), дата: 12 октября, 2012 - 18:25
#permalink

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


Автор: Гость (не зарегистрирован), дата: 27 мая, 2014 - 18:11
#permalink

А Dreamweaver 8 подойдёт как редактор?


 
Текущий раздел
Поиск по сайту
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Последние темы на форуме
Forum