Как сломать, когда содержимое div меняется?

Вот мой код: 

<html>
   <head>
     <script type="text/javascript" src="C:jquery2.js"></script>
     <script type="text/javascript">
        $(document).ready(function() {
        $('#myDiv').html('Hello World');
        });
     </script>
   </head>
   <body>
      <div id="myDiv">
          Some text...
      </div>
   </body>
</html>

Сценарий заключается в том, что я понятия не имею, что меняет содержание div. Как мне использовать chrome, firefox или firebug (выберите один), чтобы выяснить, что изменяет "myDiv"?

В идеале я хочу иметь возможность добавить точку останова на div непосредственно перед его изменением, поэтому в этот момент 'Некоторый текст..."будет отображаться на экране. Я прохожу через код и вижу код JavaScript, который взаимодействует с div. Затем, пройдя через него, я вижу div изменение содержания от " некоторого текста...- в "Привет, Мир". Это все чокнутые? Пожалуйста, объясните, почему, если это так.

1 3
jquery google-chrome firefox firebug

1 ответ:

Поскольку вы действительно хотите разбить на DOM изменения, а не код, вы можете сделать это следующим образом:

Google Chrome DevTools:

  1. НажмитеF12 , чтобы вызвать инспектора DOM.
  2. щелкните правой кнопкой мыши на элементе (внутри инспектора DOM), который вы хотите разбить.
  3. в предстоящем контекстном меню выберите Break on... > модификации поддерева

Скриншот из этого Страница:

Включение разбиваются о модификации поддерево в Chrome в инструментах разработчика

Поджигатель:

  1. НажмитеF12 , чтобы открыть Firebug.
  2. щелкните правой кнопкой мыши на элементе (внутри HTML панель ), которую вы хотите сломать.
  3. в предстоящем контекстном меню выберите прервать добавление или удаление дочернего элемента

Включение разбиения на модификации поддерева в Firebug

Обновление

Теперь вы хотите вставить точку останова данных до загрузки jQuery, так эффективно при загрузке страницы. Вы можете сделать это с помощью break указывает строку javascript, , которая не находится в событии загрузки DOM , так что она разрывается немедленно. Затем вы можете вставить точку останова DOM-change (в Chrome, используя информацию выше) и продолжить работу. Затем следует перерыв на смена дом.

<html>
   <head>
     <script type="text/javascript" src="C:\jquery2.js"></script>
     <script type="text/javascript">
        alert("Breakpoint on this line as it runs immediately during page load");
        $(document).ready(function() {
            $('#myDiv').html('Hello World');  // This does not run until the DOM finishes loading
        });
     </script>
   </head>
   <body>
      <div id="myDiv">
          Some text...
      </div>
   </body>
</html>

Теоретически можно установить точку останова на строке $(document).ready(function(), но отладчики могут делать странные вещи на линиях с встроенным обратным вызовом

3