Как узнать какой скрипт js изменяет html
Перейти к содержимому

Как узнать какой скрипт js изменяет html

  • автор:

Как посмотреть скрипт js на другом сайте.

Понравился сайт. Решил посмотреть дизайн и скрипты. Посмотрел исходный текст html файла. В файле html нашел ссылку на css файл. На другой странице открыйл файл css. Отлично получилось к адресу сайта добавил /css/main.css и посмотрел исходный текст. А если загрузить файл — адрес cайта/JavaScript/main.js файл не читается. А выполняется. Увы

На сайте с 19.05.2005
23 января 2009, 05:10
не знаю, что у вас там исполняется 🙂 берете и сохраняете файл.. 🙂

Продвигаем естественно (http://www.inetessentials.ru/) и непринужденно Проект All in Top (http://www.allintop.ru/) — обучение поисковой оптимизации без воды и на реальных примерах

На сайте с 06.11.2008
23 января 2009, 05:15
Есть плагин для FireFox — FireBug, если не ошибаюсь через него можно смотреть js:)
1) Не тупить целый день на серче. 2) Купить ссылок. 3) Перезвонить Садовскому:)
На сайте с 23.08.2006
23 января 2009, 05:26
inetessentials:
не знаю, что у вас там исполняется 🙂 берете и сохраняете файл.. 🙂

Я поставил ссылку http://сайт/jS/main.js — файл похож на index.html — часть что изменяется Загрузилось и пытаюсь сохранить => html файл При просмотре исходного текста сайт/jS/main.js вижу html файл — index.html

На сайте с 10.03.2007
23 января 2009, 05:51

Страницу (не скрипт) которая понравилась целиком сохраните (в IE сохранить вебстраницу полностью — будет файл html и папка с одним и тем же названием), в отдельной папке будут и картинки и скрипт и css файл.

На сайте с 07.06.2004
23 января 2009, 05:53

mnogo_voprosov:
Понравился сайт. Решил посмотреть дизайн и скрипты.

Посмотрел исходный текст html файла.
В файле html нашел ссылку на css файл. На другой странице открыйл файл css.
Отлично получилось к адресу сайта добавил /css/main.css и посмотрел исходный текст.
А если загрузить файл — адрес cайта/JavaScript/main.js
файл не читается. А выполняется.
Увы

Сохраните всю страницу как HTML -c изображениями. Все файлы изображений данной страницы, css и js, сохранятся в отдельной папке

Как узнать что изменило HTML элемент?

При клике на одну из кнопок на сайте исчезает другая кнопка. ( display:none ) Так не должно быть, и не могу найти код где это делается! В консоли Google Chrome и Mozzila Firefox не нашел. Проект большой. В поиске по файлам искал. ничего. магия.

Отслеживать
8,331 4 4 золотых знака 26 26 серебряных знаков 48 48 бронзовых знаков
задан 24 окт 2015 в 9:43
1,471 2 2 золотых знака 15 15 серебряных знаков 31 31 бронзовый знак

Смотрите обработчик события для данной кнопки, которую кликаете. Возможно она меняет какой-нибудь атрибут у другой кнопки. или элемент стиля

24 окт 2015 в 9:46
Смотрел, не меняет!
24 окт 2015 в 9:54

Тоже интересно. Иногда приходится совершать большие танцы с бубном и фаербагом, чтобы найти обработчик.

24 окт 2015 в 10:11

Обработчиков у кнопки может быть несколько. Посмотрите все. Также может какой-нибудь таймаут устанавливается.

24 окт 2015 в 11:45

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

В Google Chrome это делается очень просто:

Открываете Developer Tools(F12), инструментом выбора(CTRL+SHIFT+C) находите нужный элемент, и в контекстом меню этого элемента в дереве элементов выбираете функцию «Break On», c необходимым условием — при изменении подэлементов, изменении атрибутов или удалении элемента.

При соответствующем изменении, отладчик JavaScript остановится на строчке кода, которая это изменение вызвала.

функция Break On в Google Chrome Devleoper Tools

Отслеживать
ответ дан 24 окт 2015 в 10:30
Sergey Rufanov Sergey Rufanov
8,490 25 25 серебряных знаков 37 37 бронзовых знаков
Да. Спасибо! Оно. как долго я не знал о этом функионале.
24 окт 2015 в 11:08

@myvzar, а ещё в Google Chrome есть Workspaces, что позволяет использовать его в качестве полноценной IDE для фронтенда и вполне себе удобного редактора для бекенда 🙂 Очень многие вообще не знают об его существовании, выполняя правки по принципу «поменял в Chrome, скопировал в редактор, сохранил, обновил, поменял в Chrome, скопировал, сохранил, обновил, . » :))

Определить какой скрипт работает при клике на элемент(форма)?

До этого определял через инструменты Chrome просто наводил на элмент и смотрел вкладку event listener.

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

Как в данном случае определить?

  • Вопрос задан более трёх лет назад
  • 20776 просмотров

Комментировать
Решения вопроса 1
Chrome devTools->Sources->Event Listener Breakpoints
или ещё как вариант вариант
Ответ написан более трёх лет назад
Комментировать
Нравится 10 Комментировать
Ответы на вопрос 4
AntohaRomaha @AntohaRomaha
FreeBSD, PHP, MySQL, Jquery
Есть еще Visual Event для хрома расширение
Ответ написан более трёх лет назад
Нравится 4 5 комментариев

PavelScron

PavelScron @PavelScron Автор вопроса
как им пользоваться? нажимаю на икноку вверху и ничего

PavelScron

PavelScron @PavelScron Автор вопроса
разобрался, на локале не работает просто

PavelScron

PavelScron @PavelScron Автор вопроса
но проблему вопроса не решает
AntohaRomaha @AntohaRomaha
да есть целая статья на хабре.. оказалось — до сих пор это все не так просто
Где статья?

Если нужно найти именно момент загрузки чего-то с сервера, то это очень просто (в хроме).
На закладке Network включаете Preserve log, чтобы история обращений не очищалась при загрузке следующей страницы.
Провоцируете вызов события, т.е. делаете клик.
В Network находите нужную загрузку (обычно тип document, пользуйтесь фильтром) и кликаете по ссылке в столбце Initiator. Всё.
Но так вы найдёте только код, который выполняет загрузку страницы. Если же нужен обработчик события, то ставите точку останова (breakpoint), и по стеку вызовов (callstack) находите ваш listener.

Ответ написан более трёх лет назад
Комментировать
Нравится 3 Комментировать
на всё воля Бога

#id-формы — ctrl+f
form — ctrl+f
В общем инструментами разработчика выясняешь как можно идентифицировать скриптом форму, потом открываешь скрипт и простым поиском.
Если не знаешь в каком скрипте искать, открываешь, правым кликом, код страницы, поиск по «.js» кликаешь по скриптам и ищешь идентификатор своей формы.
Или. Возможно, можно убрать Jquery со страницы, тогда при клике ты увидишь в консоле & — is not a function sript.js:108

window.getComputedStyle()

Метод Window.getComputedStyle() возвращает объект, содержащий значения всех CSS-свойств элемента, полученных после применения всех активных таблиц стилей, и завершения базовых вычислений значений, которые они могут содержать. Некоторые CSS-свойства доступны через API, предоставляемые объектом, или индексацию по именам CSS-свойств.

Синтаксис

var style = window.getComputedStyle(element [, pseudoElt]);

Element , свойства которого необходимо получить.

Строка указывающая на найденный псевдо-элемент. Опускается (или null ) для не псевдо-элементов.

Возвращённый style живой CSSStyleDeclaration объект, который обновляется автоматически когда элемент стилей изменяется.

Выводы

Метод Window.getComputedStyle() предоставляет все значения CSS-свойств элементов после применения текущей таблицы стилей или базового расчёта каких-либо значений, которые могут быть.

Пример

var elem1 = document.getElementById("elemId"); var style = window.getComputedStyle(elem1, null); // this is equivalent: // var style = document.defaultView.getComputedStyle(elem1, null); 
style> #elem-container position: absolute; left: 100px; top: 200px; height: 100px; > /style> div id="elem-container">dummy/div> div id="output">/div> script> function getTheStyle() var elem = document.getElementById("elem-container"); var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height"); document.getElementById("output").innerHTML = theCSSprop; > getTheStyle(); /script> 
function dumpComputedStyles(elem, prop)  var cs = window.getComputedStyle(elem, null); if (prop)  console.log(prop + " : " + cs.getPropertyValue(prop)); return; > var len = cs.length; for (var i = 0; i  len; i++)  var style = cs[i]; console.log(style + " : " + cs.getPropertyValue(style)); > > 

Описание

Возвращённый объект — это такой же объект, который возвращается из свойства элемента style (en-US); Так или иначе, эти два объекта имеют разные назначения. Объект который возвращается из getComputedStyle только для чтения и может быть использован для инспектирования стиля элемента (включая описание из элемента или внешней таблицы стилей). Объект element.style следует использовать для установки стилей на специфических элементах.

Первый аргумент должен быть элементом (вставка узлов которые не являются элементами, например #text выдаст ошибку).

defaultView

Во многих примерах кода, getComputedStyle используется из объекта document.defaultView . Почти во всех случаях это не нужно, поскольку getComputedStyle существует в объекте window . Это что-то на подобии шаблона defaultView который был некой прослойкой. Люди не хотели писать спецификацию для window и создавали API которое также могло использоваться для Java. Так или иначе есть только один случай когда метод defaultView должен использоваться: когда вы используете Firefox 3.6 чтобы получить доступ к вычисленным стилям.

Использования с псевдо-элементами

getComputedStyle может получить информацию о стилях из псевдо-элемента (например — ::after , ::before , ::marker , ::line-marker — спецификация).

style> h3::after  content: "rocks!"; > style> h3>generated contenth3> script> var h3 = document.querySelector("h3"); var result = getComputedStyle(h3, ":after").content; console.log("the generated content is: ", result); // возвратит 'rocks!' script> 

Notes

The values returned by getComputedStyle are known as resolved values . These are usually the same as the CSS 2.1 computed values , but for some older properties like width , height or padding , they are instead the used values . Originally, CSS 2.0 defined the computed values to be the «ready to be used» final values of properties after cascading and inheritance, but CSS 2.1 redefined computed values as pre-layout, and used values as post-layout. For CSS 2.0 properties, the getComputedStyle function returns the old meaning of computed values, now called used values. An example of difference between pre- and post-layout values includes the resolution of percentages that represent the width or the height of an element (also known as its layout), as those will be replaced by their pixel equivalent only in the used value case.

The returned value is, in certain known cases, expressly inaccurate by deliberate intent. In particular, to avoid the so called CSS History Leak security issue, browsers may expressly «lie» about the used value for a link and always return values as if a user has never visited the linked site. See http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/ and http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/ for details of the examples of how this is implemented. Most other modern browsers have applied similar changes to the application of pseudo-selector styles and the values returned by getComputedStyle .

During a CSS transition, getComputedStyle returns the original property value in Firefox, but the final property value in WebKit.

In Firefox, properties with the value auto return the used value, not the value auto . So if you apply top:auto; and bottom:0 ; on an element with height:30px and its containing block is height:100px; , upon requesting the computed style for top , Firefox will return top:70px , as 100px-30px=70px .

Спецификации

  • DOM Level 2 Style: getComputedStyle
  • CSS Object Model specification

Совместимость с браузерами

BCD tables only load in the browser

Смотреть также

  • window.getDefaultComputedStyle (en-US)
  • Resolved Value

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *