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

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


Автор: Intervoice (не зарегистрирован), дата: 22 июля, 2010 - 14:04
#permalink

"jQuerify"

May be this perfect extension to embed jQuery into Chrome Console as simple as you can imagine will be helpfull for you. This extension also indocates if jQuery has been already embeded into page.

This extension used to embed jQuery into any page you want. It allows to use jQuery in the console shell (You can invoke Chrome console by "Ctrl+Shift+j").

To embed jQuery into selected tab click on extention button.

LINK to extension: https://chrome.google.com/extensions/detail/gbmifchmngifmadobkcpijhhldee...


Автор: Гость (не зарегистрирован), дата: 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 подойдёт как редактор?


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
2 + 0 =
Введите результат. Например, для 1+3, введите 4.
 
Текущий раздел
Поиск по сайту
Реклама
Содержание

Учебник javascript

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

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

Интерфейсы

Все об AJAX

Оптимизация

Разное

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

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