Вначале: на самом деле я думал о том, писать ли это раньше, потому что это не сложно, но почему так много людей спрашивают, они не спрашивают, как использовать консоль, но они не знают, что может сделать консоль. Они также знают, что есть консоль.log и другие вещи, но они не знают, почему они используют такую длинную строку, а не предупреждают об выводе информации. В их глазах достаточно блюд. Хорошо, я признаю, что я немного жаловался, но я планирую представить основные знания о отладке в этой серии, и это не будет слишком глубоко, потому что углубленные вещи сочетаются со знанием JS. Если вы не достигли того же уровня JS, даже если я научу вас отладки ошибок, взломать несколько плагинов и т. Д., Вы не знаете, что я делаю. Моя цель состоит в том, чтобы сообщить вам консоли и начать отладки. Вы должны идти по дороге впереди.
Конечно, пожалуйста, плавайте или жаловатесь. Полем
Справочник серии отладки JS:
На самом деле, люди веб-разработки знают это, будь то фронт-конечный или задний день, но многие люди сосредоточены только на просмотре HTML и модификации CSS и вообще не использовали консоль.
Может быть, некоторые новички не знают, что есть такая вещь. Полем
Есть много информации об этой вещи в Интернете, но она не говорит о отладке, она просто представляет, как ее использовать. Полем
Будь то Chrome Firefox IE (8 или выше версии) или 360 быстрый браузер Sogou и т. Д., Просто нажмите F12, чтобы открыть консоль.
Наша статья использует Chrome в качестве примера, чтобы объяснить это, но это не потому, что мне нравится Chrome. Полем У каждого есть свои предпочтения. Полем
PS: FF в прошлом, это был все Firebug, но теперь он родной.
Теперь мы нажимаем F12, чтобы открыть консоль и нажимаем на элемент консоли.
Вы можете увидеть мой аватар и несколько строк текста, но ниже есть несколько строк вещей. Мы будем игнорировать это на данный момент и объясним это позже.
Фактически, для F12 наиболее точным названием является инструменты разработчика, а консоль - консоль.
PS: В качестве основного учебника я буду представлять только отладку консоли и источников. Пожалуйста, поймите другие функции самостоятельно. Полем
Щелкните правой кнопкой мыши меню Clear Console или введите clear () и нажмите Enter, чтобы очистить консольное содержание.
Давайте сделаем первый шаг к выводу информации с помощью console.log.
Введите Console.log ("hehe ..") и console.log ("hehe ..", "хаха ..") соответственно и нажмите Enter, чтобы увидеть результат вывода на консоли.
На самом деле, это просто вывод информации, она очень просто. Используйте его вместо оповещения и документирования. Напишите отладки, и ваша работа станет очень простым.
Например, отладка кода цикла, но в массиве есть десятки или даже сотни элементов. Если вы предупреждаете, вы сойдете с ума.
Document.Write тоже неплохо, но для вывода объекта вы можете увидеть только такие вещи, как [объект объекта].
Это настоящая проблема, с которой сталкиваются многие новые друзья.
Если вы используете console.log вместо предупреждения Document.Write для вывода информации о объекте, вы можете развернуть этот объект в консоли для просмотра конкретной информации.
Например:
var arr = [{name: "nima", возраст: 22}, {name: "nima", возраст: 20}]; for (var i = 0; i <arr.length; i ++) {console.log (arr [i]);}Вы можете напрямую увидеть информацию о объекте, не показывая [объект объекта], что заставляет нас запутать.
Вы вдруг чувствуете, что консоль.log взорвана?
На самом деле, это только верхушка его айсберга. Я постараюсь показать вам некоторые из его преимуществ.
Продолжайте с шагами только сейчас, теперь мы напрямую вводим ARR, а затем нажимаем Enter.
Это еще более безудержно? Теперь вы можете напрямую нажать на объект, чтобы развернуть объекты в этом массиве для просмотра, даже сохранения вывода цикла.
Это очарование консоли, и это всего лишь самая основная особенность.
Давайте сначала поймем, какие методы находятся под объектом консоли для нас.
Введите консоли и нажмите Enter, чтобы расширить объект.
Вы можете увидеть несколько темных и светлых цветов. Темные цвета - это методы, которые мы можем позвонить напрямую. Световые цвета представляют атрибуты или методы по умолчанию, и нет необходимости беспокоиться о дисплее. Я поговорю об этом позже, если у вас будет шанс.
На самом деле, единственными распространенными являются журнал. Другие редко используются, и они будут использоваться только в продвинутой отладке.
Вспомогательные свойства, такие как группа и таблица, доступны или нет, в зависимости от ваших предпочтений. Я не очень люблю его использовать.
Давайте посмотрим на это шаг за шагом. Во всяком случае, давайте начнем с журнала Dir, и большая часть отладки зависит от них.
PS: На самом деле, я должен был дать вам официальную документацию, но Google не смог ее открыть недавно, поэтому я могу проверить функции каждого метода на Baidu.
Я нашел китайскую версию, это неплохо. Пожалуйста, прочитайте «Консольный объект» в первую очередь.
Давайте возьмем несколько упражнений после класса: (сначала откройте Baidu, затем откроем консоль)
1 Просмотреть информацию элемента с ID KW1 в консоли
2 Затем используйте метод console.dir для просмотра информации элемента KW1