1. Что такое отладка Breakpoint? Это сложно?
Отладка точки останова на самом деле не сложная вещь. Простое понимание не исходящих вызовов - открыть браузер, открыть источники, найти файл JS и нажать на номер строки. Кажется, очень просто работать, но то, в чем многие люди на самом деле смущены, - это то, где разорвать смысл? (Давайте сначала посмотрим на скриншот точки останова, взяв точку останова в качестве примера браузера хрома)
Помните шаги?
Откройте страницу с помощью браузера Chrome → Нажмите F12, чтобы открыть инструменты разработчика → Открыть источники → Откройте файл кода JS, который вы хотите отладить → Нажмите на номер строки, ОК! Поздравляем вашу точку перерыва с девственницей с ударом, ха -ха ~~
2. Как справиться с точками перерыва?
Работа точек останова очень проста. Основная проблема заключается в том, как попасть в точки останова, чтобы решить проблему с кодом? Позвольте мне продолжать приводить вам пример, чтобы понять. Без лишних слов изображение выше:
Предположим, что теперь мы реализуем функцию, которая загружается больше, как показано на рисунке выше, но есть проблема с загрузкой большего количества функций. После нажатия данные не загружаются. Что мы должны думать в это время? (Напишите ответ в другой строке, и вы можете увидеть, какова ваша первая реакция)
Первое, что пришло мне в голову, это то, был ли мой щелчок успешным? Метод в событии Click работает? Хорошо, если вы хотите узнать ответ на этот вопрос, давайте попробуем немедленно ударить точку останова. Где точка останова? Подумайте об этом сначала.
Следующая картина:
Вы думали об этом? Правильно, поскольку мы хотим знать, является ли клик успешным, конечно, мы добавляем точку останова в событии Click в коде. Помните, чтобы не добавлять его в строке 226, потому что функция в методе щелчка выполняется, а не селектор строки 226. Точка останова была достигнута сейчас, так что же делать? Подумай об этом сами ~
Продолжайте до приведенной выше картинки:
Затем, конечно, мы вернулись и нажали на кнопку «Нагрузить больше», почему? Лоб. Полем Полем Если вы спросите об этом, пожалуйста, позвольте мне использовать этот смайлик, не нажимая на кнопку «Нагрузить больше», как запустить событие Click? Как выполнить функции в событии Click без запуска события Click? Рев. Полем Но я считаю, что все не будут задавать такие низкие вопросы ~ Я не буду говорить по глупости ~
Перейдите к теме, изображение выше - это ситуация после нажатия на загрузку больше кнопок. Мы видим, что страница слева покрывается полупрозрачным слоем. Существует также ряд английского и двух кнопок над страницей. 227 строк кода справа были добавлены с цветом фона. Эта ситуация возникает, независимо от того, что означают кнопки и что делают их функции. Какую информацию вы получили с этой картинки? Продолжай думать об этом ~
Если возникает вышеупомянутая ситуация, это означает, что функция в событии Click была вызвана, что дополнительно объясняет, что событие Click вступает в силу. Затем, первый «подозреваемый в преступном», который мы вызвали с этой проблемой, исключено.
Добавить:
Что если вышеупомянутая ситуация не произойдет? Означает ли это, что событие Click не вступило в силу? Что заставило событие Click не вступить в силу? Все думают об этом сами ~
Существует много причин, по которым событие Click не вступает в силу, таких как ошибки с несколькими селекторами, синтаксические ошибки, выбранные элементы, позже генерируются и т. Д. Как его решить?
Селектор неверен, вы можете продолжать видеть содержание консольной части позже, я думаю, что все знают, как с ним справиться.
Синтаксические ошибки, проверьте внимательно. Вы можете сравнить незнакомые грамматики на Байду.
Выбранный элемент генерируется позже. Самый простой способ справиться с этим - использовать метод .on (). Эта вещь обрабатывается с помощью делегирования событий. Вы можете использовать Baidu для деталей.
Так где же будет заблокирована личность «подозреваемого преступника»?
Мы обращаем наше внимание на событие внутри, и событие Click запускается, поэтому следующая проблема - проблема функции внутри него. Если вы хотите спросить, почему? Пожалуйста, дайте мне кусок тофу. Полем Полем
Например, я дам вам ручку и попрошу написать. Затем вы пишете слово на бумаге и обнаруживаете, что слово не вышло. Почему? Вы сказали, что я написал это, и на бумаге все еще были царапины. Возможно ли, что у ручки нет чернил, или наконечник сломан? Этот пример является скорее принципом загрузки клика. Запись действий - это операция, а внутренняя функция - это наконечник чернил или ручку. Вы понимаете ~
Затем мы анализируем содержание события Click, которое содержит три предложения. Первое предложение состоит в том, что переменная, которую я выращиваю сам, второе предложение - добавить кнопку I -тега I, а третье предложение - вызов метода запроса данных.
Благодаря роли этих трех предложений мы можем поместить большую часть подозрения в третьем предложении и небольшую часть в первом и втором предложениях. Некоторые люди могут задаться вопросом, как второе предложение может быть подозрительным? Его функция - просто добавить этикетку, которая вообще не влияет на данные. Действительно, это предложение не влияет на данные, но для строгих соображений он все равно может допустить ошибки, например, что, если в нем не хватает полуколона? Или есть символ в предложении неправильно? Часто именно такая небольшая проблема тратит впустую много времени.
Хорошо, чтобы дополнительно заблокировать «подозреваемого в уголовном преступлении», я познакомлю вас с инструментом, который также является одной из двух икон, появившихся на картинке выше, см. Рисунок ниже:
Функция этого небольшого значка называется «выполнение по предложению» или «шаг за шагом». Это имя, которое я лично понимаю, что означает, что каждый раз, когда я нажимаю на него, оператор JS будет выполнять предложение позже, и у него также есть клавиша ярлыка, F10. На следующем рисунке показан эффект после того, как он нажимается:
Я дважды нажал эту кнопку (или использовал клавишу сочетания F10), и код JS был выполнен из строки 227 до строки 229, поэтому я назвал его «оператором за шагом" или "шаг за шагом". Эта функция очень практична и будет использоваться для большинства отладки.
Слишком поздно, я буду продолжать писать завтра, хорошее шоу все еще наступит ~
-
ОК, продолжайте писать!
Приведенное выше введение показывает, что я дважды нажал кнопку «Выполнение предложения», и код выполнялся от строки 227 до строки 229. Что вы думаете, что это значит? Означает ли это, что с грамматической точки зрения первые два предложения не являются проблематичными, так что это также означает, что первые два предложения устраняют подозрение? Я этого не вижу.
Как мы все знаем, загрузка больше является функцией следующей страницы, а наиболее основным является значение номера страницы, передаваемое на фоновой речь. Всякий раз, когда я нажимаю кнопку «Загрузить больше» один раз, значение номера страницы должно быть увеличено на 1. Поэтому, если данные на следующей странице не выходят, возможно ли, что есть проблема со значением номера страницы, то есть [I переменная] (следующее приведено единое имя I)? Так как же устранение неполадок, есть ли проблемы с номером страницы? Все думают первым.
Вот два способа просмотра фактического выходного значения номера страницы I], рисунок выше:
Первый тип:
Шаги работы следующие:
1. Все еще нажмите точку останова в строке 227 → 2. Нажмите кнопку «Загрузить больше» → 3. Нажмите кнопку «Выполнить оператор по предложению» один раз, а код JS будет выполнен в строке 228 → 4. Используйте мышь, чтобы выбрать i ++ (что это значит, что вы не понимаете? То есть, вы хотите скопировать что -то, вы хотите выбирать? Смотрите результат на картинке выше.
Второй тип:
Этот метод на самом деле похож на первый, за исключением того, что значение I выводится на консоли. Вам нужно только следовать первому методу, чтобы выполнить шаг 3 → 4. Откройте консоль того же уровня, что и источники → 5. Введите I → 6. Нажмите клавишу Enter Enter.
Во втором методе выше упоминается консоль. Мы можем назвать это консоли или чем -то еще. Это не важно. Консоль имеет очень мощную функцию. В процессе отладки нам часто нужно знать, каковы значения определенных переменных, или мы используем селектор [$ ». Div"), чтобы выбрать элементы, которые мы хотим, и т. Д., Можно напечатать на консоли. Конечно, также можно напрямую использовать первый метод.
Позвольте мне продемонстрировать вам элементы, которые мы хотим выбрать в консоли. Изображение выше ~
Введите $ (это) в консоли, чтобы получить выбранный элемент. Да, это объект, который мы нажали - загрузите больше элементов кнопки.
Здесь я расскажу вам о своем понимании консоли консоли: эта штука - анализатор JS, который используется самим браузером, чтобы анализировать парня, управляющего JS. Тем не менее, браузер позволяет нам, разработчикам, контролировать работу и вывод JS в процессе отладки через консоль. С помощью двух вышеупомянутых методов вы можете подумать, что он очень прост в использовании, но я хотел бы напомнить вам, или это путаница, с которой некоторые начинающие с большей вероятностью столкнутся.
В замешательстве 1: Когда нет точки разрыва, введите I в консоли, и консоль сообщает об ошибке.
Это должно быть общей проблемой для начинающих. Почему я не могу напрямую вывести значение переменных в консоли, не нарушая точку? Лично я понимаю, что в настоящее время я просто местная переменная. Если точка останова не установлена, браузер проанализирует все JS. Консоль не может получить доступ к локальным переменным, но может получить доступ только к глобальным переменным. Следовательно, консоль сообщит об ошибке, которую я не определен, но когда JS попадает в точку останова, консоль анализирует ее в функцию, где локальная переменная, которую я находится, и ко мне можно получить доступ в это время.
Путаница 2: Почему я могу распечатать что -то прямо в $ (". XXX") в консоли?
Это очень просто. Сама консоль является анализатором JS, а $ (". XXX") является оператором JS, поэтому консоль естественного может анализировать этот оператор и вывести результат.
После введения использования кнопки «Выполнение предложений» и консоль, мы наконец представим кнопку, изображение выше:
Я называю эту кнопку «Процесс выполнения процесса», которая отличается от кнопки «Выполнение оператора». Кнопка «Выполнение процесса» часто используется, когда метод вызывает несколько файлов JS. Вовлеченный код JS относительно длинный, поэтому эта кнопка будет использоваться.
Выше:
Предположим, что на рисунке выше я только сделал точку останова в строке 227, а затем продолжал нажать кнопку «Выполнить оператор по предложению» в строке 229, что, если я снова нажмите кнопку «Выполнить оператор по предложению»? Он войдет в JS на следующей картинке:
Это содержимое файла библиотеки Zepto. Нет ничего хорошего смотреть. Это очень сложно бежать. Мы не всегда можем использовать кнопку «Выполнение предложения», так что вы обнаружите, что нажимали большую часть дня и все еще кружили в файле библиотеки. Полем Полем Что делать в это время? Затем пришло время кнопку «Процедура по процессу выполнения», чтобы выйти на сцену.
Выше:
В дополнение к установке точки останова в строке 227, я также нажимаю точку останова в строке 237. Когда мы запускаемся в строку 229, напрямую нажимайте кнопку «Процедура по процессу». Вы обнаружите, что JS непосредственно пропустил файл библиотеки и забежал до строки 237. Вы можете использовать его для себя, чтобы испытать его.
Последнее резюме:
В этой статье в основном представлены три инструмента кнопки «Процесс по заслуженным выполнению», кнопку «Процесс-выполнение», консольную консоль и некоторые идеи при отладке ошибок. Я не буду повторять использование инструмента. Просто знаю использование. Как использовать его более разумно, необходимо обобщить и улучшить через большую практику ~
На самом деле, то, о чем я хочу говорить в основном в этой статье, - это способ отладки ошибок, но потому что выбранные примеры, которые я выбрал, включают слишком много вещей. Полем Полем Я боялся, что содержание всего этого было слишком длинным, и все не были заинтересованы в его чтении, поэтому я просто выбрал роль, чтобы объяснить это вам. Интересно, что вы что -нибудь получили. Не смотрите на три предложения, которые я написал много вещей в отладке. Если вы действительно делаете это, как я в реальном проекте, вам, вероятно, потребуется гораздо больше времени, чтобы отлаживать ошибку, чем написать сценарий. Полем Полем В реальных ситуациях мы должны развить в первый раз, когда мы получаем проблему, проверить проблему в наших умах и найти наиболее вероятный момент. Если мы не сможем быстро найти наиболее важную точку зрения, то вы можете использовать наиболее хлопотный, но надежный метод для использования кнопки «Выполнение предложения по предложению», чтобы выполнить весь JS, связанный с проблемой один за другим. В процессе выполнения мы также должны прояснить наши мысли и обратить внимание на правильное значение каждой переменной и элементов, выбранных селектором. Вообще говоря, если вы сделаете это один раз, ошибки будут почти решены.
Поэтому я лично считаю, что наша идея отладки ошибок должна быть следующей: во -первых, успешно ли JS; Во -вторых, есть ли JS -проблемы, проблемы с переменной, проблемы с параметрами и т. Д.; Наконец, если нет проблем с вышеизложенным, пожалуйста, внимательно проверяйте различные символы. Полем Полем
ОК ~ Это все о точке останова ~ Если вы не понимаете, вы можете оставить сообщение ниже ~ Если у вас есть какие-либо знания, которые вы не понимаете или не смущаетесь в переднем крае, вы также можете оставить сообщение ниже. Когда у вас будет время, я буду продолжать писать несколько документов в ваших сообщениях ~