TedMosby26 апр 2012 в 20:01

Внутренности jQuery. Поиск кода, выполняемого по событию

4 мин

25K

Google ChromeJavaScript * jQuery *

+118

Комментарии 34

Dimond17 26 апр 2012 в 20:22

>>Чем старше веб, тем больше джаваскрипта

а чем больше джаваскрипта, тем больше глюков

oWeRQ 26 апр 2012 в 21:14

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

neosys 27 апр 2012 в 04:42

Фигню сморозили

maximw 27 апр 2012 в 07:10

Можно экстраполировать вашу мысль: чем больше кода, тем больше глюков.
И вывести следствие: идеальный код без глюков — отсутствие кода.

Damaskus 27 апр 2012 в 07:54

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

nick4fake 26 апр 2012 в 20:37

<< Тру-хакерам достаточно в консоли Javascript написать $(selector).data('events')
Опустили звание хакера до фантика

TedMosby 26 апр 2012 в 20:41

Это же шутка :)
Имеется в виду по сравнению с теми, кто использует расширение с графическим интерфейсом.

nick4fake 26 апр 2012 в 20:52

Я часто использую консоль хрома вместо калькулятора, или чтобы найти длину строки, а вы так шутите… :)

phasma 26 апр 2012 в 21:06

там же не удобно. У меня для этого Scheme стоит.

pro100tak 26 апр 2012 в 22:23

Если событие установлено через live()/delegate()/on() не на самом элементе, а на родительском (или даже оно будет всплывать до body), то через $(selector).data('events') мы ничего не узнаем. Узнаем только на элементе, до которого всплывает событие. Соответственно, будет что-то типа такого:

{
    click : [
        0: { ... }
    ],
    live : [
        0: { ... }
    ]
}

Причём в click.0.origHandler будет ссылка на функцию из секции live (live.0.handler).

AnGr 26 апр 2012 в 20:58

Неплохо, очень неплохо. И про некоторые ранее неведомые возможности Chrome devtool узнала! Благодарю!

TedMosby 26 апр 2012 в 21:07

Спасибо!

pel 26 апр 2012 в 22:03

Вам спасибо!

vermilion1 27 апр 2012 в 10:25

Оставил ссылку ниже, но следовало сделать это здесь :)

JhaoDa 26 апр 2012 в 22:54

Метода прекрасно работает и в FF+Firebug, разве что проверять на главной Яндекса бесполезно, в какие-то дебри уводит. Спасибо:)

habrauser 27 апр 2012 в 04:12

У меня почему-то наоборот, в Хроме уводит, а в Файрфоксе появляется всплывающее окно.

TedMosby 27 апр 2012 в 05:34

После выполнения шага 6 у вас должен быть код, изображенный на последней картинке. У вас что-то другое? Можно посмотреть?

satellight 27 апр 2012 в 04:44

Вместо установки расширения Visual Event можно вытащить на панель закладок ссылку с сайта разработчика. Работает, как минимум, в ФФ и хроме.

omfg 27 апр 2012 в 05:18

Для firefox есть отличное дополнение — fireQuery. Сразу во вкладке с кодом показываются навешены ли события на элемент и если да, то можно легко пройти до функции, которая на него навешена.

TedMosby 27 апр 2012 в 05:35

У вас получилось найти код, изображенный на последней картинке? У меня что-то не выходит...(

omfg 27 апр 2012 в 06:06

Нажимаете на events > выпадает список всех событий > выбираете нужное и кликаете на его функцию handler. Единственное, что у firebug нет «pretty print», как в chrome, поэтому с инлайновыми скриптами встроенными прямо в страницу проблема и найти этот скрипт в одной строке достаточно сложно =/ Нормального форматера я, к сожалению, не нашел

spmbt 27 апр 2012 в 06:12

мы ищем обработчик события, который был добавлен с использованием библиотеки jQuery, которая сейчас очень популярна

== ищем потерянные ключи под фонарём, потому что там светлее. Но через Хром можно искать любые события. Правда, только сработавшие. Если действительно ограничиваться jQuery, то в Fx есть давно FireQuery, показывающий все места, на которые повешены обработчики.

david_mz 27 апр 2012 в 07:14

> Кликаем по ссылке, попадаем в какой-то внутренний орган jQuery — скорее всего в ЖКТ. В некоторых случаях этот способ эффективен, и мы сразу можем увидеть вызываемый код. Но только не в этом. Как из этого места добраться до искомого кода — честно говоря, не знаю.

Всё довольно просто на самом деле. Включаем pretty print (для удобства) и кликаем на F11 (step into next function call), пока не выйдем из jquery и не попадём в вызванный им обработчик.

termi 27 апр 2012 в 07:35

задача все-таки не решается до конца: код-то мы увидели, но в каком файле и на какой строке он находится, мы не знаем

Сам был очень удивлён отсутствием этой информации, т.к. в аналогичном расширении для Opera есть и название файла и номер строки.

extensible 27 апр 2012 в 07:56

Прикольно. Оно даже live-эвенты хавает :)

taliban 27 апр 2012 в 08:27

Я вообще был удивлен фразой что такого функционала нет в других браузерах. В опере есть все необходимое чтоб проделать то же самое, вплоть до отлова евентов.

termi 27 апр 2012 в 10:50

Да-да меня тоже это насторожило.
Но, согласитесь, в Dragonfly нету:
1. «Break on * modifications». И вообще DOM-дерево в отладчике не живое. И непонятно когда этот функционал появится.
2. «pretty print». Хотя, скоро должен появится.