@Bandicoot
Вась-программист
Бывает такое: на страницу проекта навешана куча скриптов. Мне нужно для какого-либо определенного html-тега отследить его обработчик, какой именно скрипт с ним работает. Как это можно быстро сделать, например, в WebStrom’e или в Sublime?
-
Вопрос заданболее трёх лет назад
-
6977 просмотров
в хроме, в дебаг панели вы можете: посмотреть все обработчики событий на элементе (не очень помогает при использовании jQuery), или же поставить бряку на изменение dom элемента, и таким образом находить код, который собственно этот элемент и меняет.
А так как способов навесить события, не прописывая теги масса, или масса вариантов записи селектора, то просто поиском по коду разве что что-то простое можно найти.
Пригласить эксперта
Если я правильно понял вопрос, букмарклет Visual Event вам поможет.
Неверно задан вопрос, IDE работают с исходными текстами, а не с тегами. Отследить изменение можно в браузере через «консоли разработки», для firefox я использую firebug, у браузеров с движком webkit своя неплохая. Вызывается консоль по F12. Потом делаете «инспектировать элемент» при помощи правой кнопки на нужном элементе на сайте. И в панели c DOM деревом кликаете правой кнопкой на выбранный элемент и там есть что-то наподобие «останавливать при добавлении/удалении потомка», ну и вообще попробуйте какие варианты есть.
-
Показать ещё
Загружается…
29 мая 2023, в 06:54
5000 руб./за проект
29 мая 2023, в 06:37
1500 руб./за проект
29 мая 2023, в 06:23
15000 руб./за проект
Минуточку внимания
Одной командой
document.write((((Array.from(document.getElementsByTagName("script"))).map(i => {return i.src}))).join("<br>"))
Куда вводить эту команду? Открываете HTML-страницу, с которой хотите получить все ссылки. Включаете «Инструменты разработчика» в браузере (CTRL + SHIFT + i). Находите вкладку «Console«. Тыкаете курсор в белое поле справа от синей стрелочки. Вставляете команду. Жмёте ENTER.
Для тех кто не понял длинную строчку кода выше, предлагаю упрощённую для понимания версию. Пошаговая инструкция ниже.
Практика решения задачи
Для начала получим все элементы script на HTML-странице. Используем метод getElementsByTagName(), интерфейса Document, стандарта DOM.
var a = document.getElementsByTagName("script")
Вывод в консоль браузера:
Перегоним коллекцию в массив. Обратимся к свойству from() конструктора Array.
var b = Array.from(a)
Вывод в консоль браузера:
Определим где элементы script хранят свои ссылки на файл. В нашем случае это ключ src.
Вытащим из каждого элемента script ключи src. Воспользуемся методом map() прототипов Array.
var c = b.map(i => {return i.src})
Вывод в консоль браузера:
Соединим все элементы массива в одну строку.
var d = c.join("<br>")
Вывод в консоль браузера:
Выведем ссылки в текущий документ:
document.write(d)
Вывод в консоль браузера и на страницу:
Итог
В списках могут быть пустые значения ключа src для элемента script. Это значит, что код скрипта прописан напрямую в HTML-документе, а не ссылается на какой-либо файл. Их необходимо фильтровать и выводить очищенные данные.
Пример такого элемента script:
Для получения кода скрипта нужно будет обращаться к ключам text и textContent:
Ссылки
JavaScript | Как получить список каких-либо HTML-элементов из документа?
JavaScript | Как получить все ссылки на HTML-странице?
JavaScript | Как получить все внешние ссылки на HTML-странице?
JavaScript | Как получить все внутренние ссылки на HTML-странице?
JavaScript | Массивы (Array)
JavaScript | Объявление массива через квадратные скобки []
ECMAScript — Living Standard — https://tc39.es/ecma262/#sec-array-objects
ECMAScript — Living Standard — https://tc39.es/ecma262/#sec-array.from
Свойства конструктора Array
Свойства объекта прототипа Array
-
#1
Только-только установил InDesigne CS. Теперь хотелось бы увидеть какие-то скрипты и попробовать их запустить, но в палитрах Scripts и Script Label ничего нет (и никакого меню, типа «редактировать» или «создать новый скрипт» в этих палитрах тоже нет), хотя в папке Presets/Scripts сидят четыре скрипта *.js.
Как можно их увидеть и запустить?
Спасибо.
P.S. Может быть из-за того, что дистрибутив программы «левый»?
-
#2
Ответ: как увидеть скрипты?
индизайн не приспособлен для создания и редактирования скриптов 
-
#4
Ответ: как увидеть скрипты?
Psy сказал(а):
индизайн не приспособлен для создания и редактирования скриптов
Хорошо, я согласен не редактировать и не создавать, но запустить-то предложенные скриптовые примерчики я должен иметь право 
Опять же извиняюсь за чудовищно глупый вопрос типа «как завести двигатель у автомашины?». Но надо же это когда-то сделать первый раз…
«Прежде, чем спрашивать…
Попытайтесь найти ответ с помошью поиска в Web.
Этот шаг и привел меня сюда, на форумы DTP.
Попытайтесь найти ответ в руководстве.
Читаю официальный Адобовский учебный курс по Индизайну. Там нет даже упоминания о скриптах.
Попытайтесь найти ответ в списке часто задаваемых вопросов (ЧаВО).
Там ответы (насколько я понял), как пользоваться форумом, но не программами.
Попытайтесь найти ответ путем проверок или экспериментов.
2 часа перебирал все менюшки и подменюшки во всех палитрах — и тишина, а в скриптовой палитре таковых менюшек даже не оказалось.
Спросите опытного товарища.
Все товарищи по работе понятия не имеют о скриптинге в верстальных программах. В Web’e — пожалуйста, а про Индизайн не знают — верстальщиков кроме меня нет.
Может быть все же подскажите (ну в виде исключения), как воспользоваться скриптами в программе Индизайн.
В Пейдже я это освоил, а с Индизайном накладочка выходит… 
(
-
#5
Ответ: как увидеть скрипты?
CS версия сейчас, подозреваю, мало у кого осталась
а хелп программы про это что говорит, вы спрашивали?
-
#7
Ответ: как увидеть скрипты?
Выдержка из русского Help-а:
Обзор палитр «Сценарии» и «Ярлык сценария»
InDesign содержит две палитры для работы со сценариями: «Сценарии» и «Ярлык сценария».
С помощью палитры «Сценарии» можно выполнять сценарии, не выходя из программы InDesign. В палитре «Сценарии» отображаются сценарии, расположенные в подпапках Scripts папки приложения InDesign и в пользовательских папках «Установки». Чтобы сценарий появился в палитре «Сценарии», после создания или получения его необходимо поместить в папку Scripts.
Mac OS Users/[имя_пользователя]/Library/Preferences/Adobe InDesign/[версия]/Scripts
Windows XP Documents and Settings[имя_пользователя]Application DataAdobeInDesign[версия]Scripts
Windows Vista Users[имя_пользователя]AppDataRoamingAdobeInDesign[Версия]Scripts
Затем можно дважды щелкнуть сценарий в палитре «Сценарии», чтобы выполнить его, либо выполнять сценарии с помощью функции «Быстрое применение».
Палитра «Ярлык сценария» позволяет задавать ярлыки для элементов страницы: текстовых фреймов, фигур и др. Задание ярлыков для элементов страницы особенно полезно при написании сценариев, в которых необходима идентификация объектов.
Подробные сведения о добавлении, запуске и редактировании сценариев см. в руководстве по созданию сценариев в папке Adobe InDesign Technical Info на DVD-диске с InDesign или на web-сайте Adobe.
Не по теме:
Сценарии — надо же…
Из английского надо?
-
#8
Ответ: как увидеть скрипты?
Psy сказал(а):
CS версия сейчас, подозреваю, мало у кого осталась
а хелп программы про это что говорит, вы спрашивали?
Она грит, что надо пользоваться официальной копией дистрибутива (в моем переводе ;-):
«The Scripts palette lets you automate many InDesign tasks using JavaScript, Applescript, or Visual Basic. For more information, see the Scripting Guide in the Adobe InDesign Technical Info folder on the InDesign CD.»
А такой директории у меня, ессно, нет.
Но все равно спасибо за подсказки, поищу с учетом слов «сценарии» или более новую версию программы, или сам Scripting Guide. Как только разберусь, снова к вам с вопросами уже по делу.
Спасибо.
-
#9
Ответ: как увидеть скрипты?
Поставил «portable» CS3 и все предустановленные скрипты увиделись и даже запускаются. Видимо дело в корявости моей установленной версии CS. Буду искать нормальный дистрибутив. Спасибо за подсказки, все теперь понял.
-
#11
Ответ: как увидеть скрипты?
Поставил «portable» CS2, а скрипты никуда закинуть не получается. Уже создал папку со скриптами с путем C:Program FilesAdobeAdobe InDesign CS2PresetsScripts, но всё-равно не видно. Вот что делать? Или портабла кривая?
-
#12
Ответ: как увидеть скрипты?
MAO_the_Doom сказал(а):
Поставил «portable» CS2, а скрипты никуда закинуть не получается. Уже создал папку со скриптами с путем C:Program FilesAdobeAdobe InDesign CS2PresetsScripts, но всё-равно не видно. Вот что делать? Или портабла кривая?
Я кстати и отказался от портабл в свое время, т.к. у меня не получилось что-то сохранять (настройки, скрипты).
Хотя может надо поменять путь:
для cs3: c:Program FilesAdobeAdobe InDesign CS3ScriptsScripts Panel ?
-
#13
Ответ: как увидеть скрипты?
ну это надо чтоб некоторые ресурсы были вне экзешника.
замороченая это тема, иногда простенькие програмки портаблю прогой Thinstall, но такие серьезные проги как индюк конечно требуют дополнительной ручной сборки
-
#14
Ответ: как увидеть скрипты?
понакопировал папку со скриптами во все пути, какие только можно — и в реальный диск, и в теневой, который был в портабле (пишется через символ %) — не помогло…
Научите плиз делать portable, а то ещё хочу Иллюстратор CS3 portable, но везде только 10.0.0, а хотелось бы 10.0.3. Или это сильно мудрёно?
-
#15
Ответ: как увидеть скрипты?
может и не сильно, но уж точно не здесь этому учить. Есть ресурсы портабельного софта, там надо спрашивать.
кстати, осторожней с этим. у меня после запуска портабельного дримвевера-кс4 слетела вся лицензия кс3, пришлось переставлять.
а вообще проще поставить VirtualPC и туда устанавливать че хочешь. вот у меня на работе в системе только пакет адобы, нод32 и хром, все остальное либо портабле либо в VirtualPC
-
#16
Ответ: как увидеть скрипты?
Для того, чтобы в портабельном InDesign можно было запускать скрипты, нужно немного повозиться
Идем в меню File — Open
В строке с именем файла набираем
*.*
нажимаем клаву Enter. Это заставит программу раскрыть свою внутреннюю файловую систему. Далее в диалоге открытия файла идем в «Мой компьютер». Обычно программа будет находиться в Program files (но у меня был случай, что и в корне диска С). Не закрывая диалога переключаемся в файловый менеджер (например — Total Commander), копируем файлы скрипта, переключаемся в InDesign, идем в папку PresetsScripts (для версии CS2, для CS3 и 4 — Documents and Settings[username]Application DataAdobeInDesignVersion 6.0en_USScriptsScripts Panel — это путь для CS4) и Ctrl-V. Затем открываем панель со скриптами, и запускаем.
Как вариант — сделать свою сборку индизайна, но включить еще и файловый менеджер. Он будет позволять работать с виртуальной файловой системой портабельной программы.
LeshikSan — значит ваш дримвивер был сделан при помощи технологии PortableApps (большая часть делается с помощью Thinstall). Она гадость еще та. Помимо слета стационарно установленных программ очень любит не убирать за собой мусор.
Недавно мы рассказали о том, как начать писать программы на JavaScript:
- что такое HTML и JavaScript;
- из чего состоят скрипты;
- как и где их выполнять и куда вставлять;
- где искать готовые решения и что с ними потом делать;
- как работать с разными элементами и обрабатывать нажатия клавиш.
Теперь шагнём дальше — изучим отладку скриптов в браузере и посмотрим, чем она может нам помочь.
Что такое отладка
Отладка — это поиск и исправление ошибок в программе. Например, мы написали скрипт, добавили его на страницу, настроили запуск по нажатию кнопки — а при нажатии ничего не происходит. При этом в консоли нет никаких ошибок — все команды верные, браузер просто что-то делает, а результата нет. Отладка нужна как раз для того, чтобы найти ошибку и исправить её.
Варварская отладка
Самый примитивный вариант отладки — добавить в код на JavaScript метод console.log(), поместив в скобки нужные данные для отладки. Console.log() — это просто способ вывести в консоль какой-нибудь текст.
Например, внутри функции можно сказать: console.log(‘Вызвана такая-то функция’) — и в нужный момент мы увидим, что функция вызвалась (или нет).
Минус этого подхода в том, что в коде появляется много отладочного мусора. А ещё, если мы не предусмотрели логирование для какой-то функции, то мы не поймаем в ней ошибку.
К счастью, помимо console.log() человечество изобрело много удобных инструментов отладки.
Что нужно для отладки
Для несложных проектов на JavaScript проще всего использовать встроенный отладчик в браузере Google Chrome. Единственное ограничение — он работает только с файлами скриптов, а не со встроенным в страницу кодом. Это значит, что если код скрипта находится внутри HTML-файла внутри тега <script>, то отладка не сработает.
Чтобы открыть панель отладки в Chrome, нажимаем ⌘+⌥+I и переходим на вкладку Sources (Источники):
Открываем скрипт
Допустим, мы хотим посмотреть, как работает скрипт из задачи про выпечку и как он перебирает все варианты.
Всё, что у нас есть, — это код. Чтобы мы смогли его отладить, его нужно положить в отдельный файл скрипта, присоединить к HTML-документу и запустить в браузере.
Открываем любой текстовый редактор, например Sublime Text, вставляем код скрипта и сохраняем файл как temp.js. Имя может быть любым, а после точки всегда должно стоять js — так браузер поймёт, что перед нами скрипт.
После этого в новом файле вставляем шаблон пустой HTML-страницы и подключаем наш скрипт — добавляем в раздел <body> такую строку:
<script type="text/javascript" src="temp.js"></script>
Получиться должно что-то вроде такого:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<script type="text/javascript" src="temp.js"></script>
</body>
</html>Сохраняем этот код как HTML-файл, например index.html, и кладём в ту же папку, что и скрипт. Теперь заходим в папку и дважды щёлкаем по HTML-файлу, чтобы открыть эту страницу в браузере:
На странице ничего нет, но нам нужна не страница, а скрипт, поэтому находим слева наш файл temp.js и нажимаем на него — откроется код скрипта. Теперь можно начинать отладку:
Добавляем точки остановки
Точка остановки — это место, в котором наш скрипт должен остановиться и ждать дальнейших действий программиста. Их ещё называют брейкпоинты, от английского breakpoint — точка, где всё останавливается.
Когда скрипт доходит до этой точки, он ставит скрипт на паузу. При этом все данные и значения переменных скрипта остаются в памяти — в них можно заглянуть.
Брейкпоинт нужен для того, чтобы выполнить скрипт по шагам, начиная с первой команды. Чтобы его установить, нажимаем на номер строки с первой командой — в нашем случае это строка 2:
Обновим страницу и увидим, что скрипт начал работу и остановился. Но он остановился не на второй строке, а на шестой — всё потому, что это первая строка в скрипте, где происходит какое-то действие. Дело в том, что просто объявление новых переменных не влияет на работу скрипта, поэтому он ищет первую команду с действием. В нашем случае — это цикл for:
Пошаговая отладка
Чтобы посмотреть на работу скрипта по шагам, надо нажимать F9 или стрелку вправо с точкой на панели отладки:
Каждый раз, как мы будем нажимать F9 или эту кнопку, скрипт будет переходить к следующей команде, выполнять её и снова становиться на паузу:
Добавляем переменные для отслеживания
Если просто выполнять скрипт по шагам, то мы увидим, какие команды и в каком порядке выполняются, но не будем знать, какие значения лежат в переменных на каждом шагу. Их можно увидеть, просто наведя курсор на любую переменную — над ней появится всплывающая подсказка с текущим значением. Но так работать неудобно — проще сразу видеть значения всех переменных.
Чтобы добавить переменную и видеть её значение во время выполнения, в панели отладки в разделе Watch нажимаем плюсик, вводим имя переменной, выбираем её из списка и нажимаем энтер:
Теперь видно, что на этом шаге значение переменной a равно нулю:
Точно так же добавим остальные переменные: i, b, c. Так мы увидим, что первые два цикла только начались, а внутренний прошёл уже три итерации:
Так, нажимая постоянно F9, мы прогоним весь скрипт до конца и посмотрим, при каких значениях какие условия выполняются и как находится решение:
Но у такого подхода есть минус — если вложенных циклов много или скрипт очень большой, то на пошаговое выполнение уйдёт много времени. Чтобы не перебирать всё вручную, ставят дополнительные брейкпойнты в нужных местах.
Отладка брейкпойнтами
Допустим, нам важно понять, в какой момент скрипт находит и выдаёт решение. Глядя в код, мы понимаем, что как только скрипт дошёл до команды console.log() — он нашёл очередное решение. Это значит, что мы можем поставить брейкпоинт только на эту строчку и не прогонять вручную весь скрипт: он сам остановится, когда дойдёт до неё, а мы сможем посмотреть значения переменных в этот момент.
Для этого:
- Нажимаем снова на строку 2 и убираем предыдущую точку остановки.
- Ставим брейкпоинт на строку 20 — там, где происходит вывод решения в консоль.
- Нажимаем F8.
После этого скрипт продолжит работу сам и снова остановится, как только дойдёт до этой строки. Обратите внимание на значения переменных — они меняются к каждой остановке, а значит, скрипт работает как обычно, но останавливается в нужном нам месте:
Таких точек остановки можно поставить сколько угодно и в любой момент — на каждой из них отладчик остановится и покажет текущее состояние скрипта.
Зачем это всё
Отладка нужна, чтобы найти ошибки в программе. Если мы видим, что на очередном шаге в переменной находится не то, что мы ожидали увидеть, значит, что-то в коде идёт не так. Мы ставим брейкпоинт на начало нужных команд, запускаем отладку и находим команду, которая приводит к ошибке.
В следующей статье мы покажем на примере с реальным кодом, как отладка помогает находить и исправлять такие ошибки. Подпишитесь, чтобы не пропустить это.
Вёрстка:
Кирилл Климентьев
Программа была удалена или не запускается.
Не делал резервное копирование данных и не сохранял скрипты в файлы.
Где находятся скрипты, созданные в визуальном редакторе?
Скрипты сохранены в файле TSLabData.sdf на пути C:Users<NAME>AppDataLocalTSLabTSLab12
Но можно попробовать реанимировать программу для доступа к скриптам.
Если программа не запускается:
— Переместите файлы конфигураций, так, чтобы при запуске программа их не нашла.
Если не получиться запустить программу, то:
— Удалите программу стандартными средствами windows.
— Установите программу
И поставщики данных и скрипты по идее должны подхватиться . Перед удалением можно скопировать файл sdf.
— После этого создать бекап скриптов в программе.