Sdscompany.ru

Компьютерный журнал
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Команды для javascript

10 консольных команд для упрощения отладки JavaScript-кода

  • Переводы, 23 ноября 2018 в 16:23
  • Corewood

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

Группировка логов

Как понятно из имени метода, он позволит сгруппировать несколько логов в одно раскрывающееся дерево. Можно даже организовывать вложенные деревья для последующей группировки.

У этого приёма есть три метода: console.group(‘name’) отмечает начало группировки, console.groupEnd(‘name’) отмечает окончание, а console.groupCollapsed() создаёт группу в виде скрытого дерева.

Трассировка стека

В случае, если необходимо найти полный стек вызова функции, очень полезной будет функция console.trace() . Например, так можно отследить, откуда пришёл коллбек:

Счётчик вызовов

Функция console.count() возвращает количество раз, когда её вызывали. Учтите, что если вы измените строку лога, отдаваемую функции, счётчик обнулится и начнёт отсчёт для новой строки. Также есть функция сброса счётчика console.countReset() .

Таймер в консоли

Команды console.time() и console.timeEnd() позволяют соответственно начать и остановить отсчёт времени. В основном это нужно для проверки производительности. Также можно передать функциям строку для создания специфического таймера.

Работа с логическими выражениями

Допустим, вам нужно проверить, приняло ли какое-то выражение значение false и записать это в лог. В обычной ситуации можно использовать условный оператор if , но в нашем случае куда лучше подойдёт функция console.assert() . Функция принимает в качестве аргумента выражение, а также сообщение либо объект.

Профилирование

Как часто вам приходило в голову, что стоило приступить к профилированию сразу, вместо оттягивания до последнего и ручного поиска той функции, с которой и стоило начать? console.profile() призвана помочь с этим. После завершения профилирования просто вызовите эту функцию.

Метка времени

Функция console.timeStamp() добавляет событие в таймлайн во время записи. Можно использовать, например, по окончании процесса обработки данных или для того, чтобы поймать момент возвращения вызова API. В качестве аргумента функция принимает название какого-либо события.

Очистка консоли

Простейшая функция console.clear() очищает консоль.

Чтение размера буфера

Свойство console.memory позволяет отображать размер буфера. Полезно, когда статистика производительности не совсем прозрачна и нет времени рассматривать графики.

Пользовательская таблица

Функция console.table() , принимающая в качестве аргумента массив, выводит небольшую удобную таблицу, с которой можно взаимодействовать. Для вызова нужно передать ей массив объектов.

Заключение

Вряд ли процесс отладки когда-либо станет вашим любимым занятием, но с помощью этих приёмов жизнь может стать чуточку проще.

Структура кода

Начнём изучение языка с рассмотрения основных «строительных блоков» кода.

Инструкции

Инструкции – это синтаксические конструкции и команды, которые выполняют действия.

Мы уже видели инструкцию alert(‘Привет, мир!’) , которая отображает сообщение «Привет, мир!».

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

Например, здесь мы разделили сообщение «Привет Мир» на два вызова alert:

Обычно каждую инструкцию пишут на новой строке, чтобы код было легче читать:

Точка с запятой

В большинстве случаев точку с запятой можно не ставить, если есть переход на новую строку.

Так тоже будет работать:

В этом случае JavaScript интерпретирует перенос строки как «неявную» точку с запятой. Это называется автоматическая вставка точки с запятой.

В большинстве случаев новая строка подразумевает точку с запятой. Но «в большинстве случаев» не значит «всегда»!

В некоторых ситуациях новая строка всё же не означает точку с запятой. Например:

Код выведет 6 , потому что JavaScript не вставляет здесь точку с запятой. Интуитивно очевидно, что, если строка заканчивается знаком «+» , значит, это «незавершённое выражение», поэтому точка с запятой не требуется. И в этом случае всё работает, как задумано.

Но есть ситуации, где JavaScript «забывает» вставить точку с запятой там, где она нужна.

Ошибки, которые при этом появляются, достаточно сложно обнаруживать и исправлять.

Если вы хотите увидеть конкретный пример такой ошибки, обратите внимание на этот код:

Пока нет необходимости знать значение скобок [] и forEach . Мы изучим их позже. Пока что просто запомните результат выполнения этого кода: выводится 1 , а затем 2 .

А теперь добавим alert перед кодом и не поставим в конце точку с запятой:

Теперь, если запустить код, выведется только первый alert , а затем мы получим ошибку!

Всё исправится, если мы поставим точку с запятой после alert :

Теперь мы получим сообщение «Теперь всё в порядке», следом за которым будут 1 и 2 .

В первом примере без точки с запятой возникает ошибка, потому что JavaScript не вставляет точку с запятой перед квадратными скобками [. ] . И поэтому код в первом примере выполняется, как одна инструкция. Вот как движок видит его:

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

Мы рекомендуем ставить точку с запятой между инструкциями, даже если они отделены переносами строк. Это правило широко используется в сообществе разработчиков. Стоит отметить ещё раз – в большинстве случаев можно не ставить точку с запятой. Но безопаснее, особенно для новичка, ставить её.

Комментарии

Со временем программы становятся всё сложнее и сложнее. Возникает необходимость добавлять комментарии, которые бы описывали, что делает код и почему.

Комментарии могут находиться в любом месте скрипта. Они не влияют на его выполнение, поскольку движок просто игнорирует их.

Однострочные комментарии начинаются с двойной косой черты // .

Часть строки после // считается комментарием. Такой комментарий может как занимать строку целиком, так и находиться после инструкции.

Многострочные комментарии начинаются косой чертой со звёздочкой /* и заканчиваются звёздочкой с косой чертой */ .

Содержимое комментария игнорируется, поэтому, если мы поместим внутри код /* … */ , он не будет исполняться.

Это бывает удобно для временного отключения участка кода:

В большинстве редакторов строку кода можно закомментировать, нажав комбинацию клавиш Ctrl + / для однострочного комментария и что-то, вроде Ctrl + Shift + / – для многострочных комментариев (выделите кусок кода и нажмите комбинацию клавиш). В системе Mac попробуйте Cmd вместо Ctrl .

Не может быть /*. */ внутри /*. */ .

Такой код «умрёт» с ошибкой:

Не стесняйтесь использовать комментарии в своём коде.

Комментарии увеличивают размер кода, но это не проблема. Есть множество инструментов, которые минифицируют код перед публикацией на рабочий сервер. Они убирают комментарии, так что они не содержатся в рабочих скриптах. Таким образом, комментарии никоим образом не вредят рабочему коду.

Позже в учебнике будет глава Качество кода, которая объяснит, как лучше писать комментарии.

Комментарии

  • Если вам кажется, что в статье что-то не так — вместо комментария напишите на GitHub.
  • Для одной строки кода используйте тег , для нескольких строк кода — тег

, если больше 10 строк — ссылку на песочницу (plnkr, JSBin, codepen…)

  • Если что-то непонятно в статье — пишите, что именно и с какого места.
  • Предложение от 8host.com

    Использование консоли разработчика JavaScript

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

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

    Данное руководство научит работать с консолью JavaScript в браузере и ознакомит с другими встроенными инструментами разработки, которые могут вам пригодиться.

    Работа с консолью JavaScript в браузере

    Большинство современных веб-браузеров, поддерживающих HTML и XHTML, по умолчанию предоставляют доступ к консоли разработчика, где вы можете работать с JavaScript в интерфейсе, подобном оболочке терминала. В этом разделе вы узнаете, как получить доступ к консоли в Firefox и Chrome.

    Браузер Firefox

    Чтобы открыть Web Console в браузере FireFox, откройте меню ☰ в верхнем правом углу.

    Нажмите кнопку Developer. Она откроет меню Web Developer, где вы сможете выбрать Web Console.

    Консоль откроется в нижней части окна браузера.

    Вы также можете войти в веб-консоль с помощью сочетания клавиш Ctrl+Shift+K в Linux и Windows или Command+Option+K в macOS.

    Браузер Chrome

    Чтобы найти JavaScript Console в браузере Chrome, откройте меню в правом верхнем углу окна (кнопку с тремя точками по вертикали). Выберите More Tools → Developer Tools.

    На экране появится панель. Выберите Console в верхнем меню, чтобы получить доступ к консоли JavaScript Console.

    Вы также можете войти в веб-консоль с помощью сочетания клавиш Ctrl+Shift+J в Linux и Windows или Command+Option+J в macOS.

    Работа с консолью JavaScript

    В консоль можно вводить код JavaScript.

    Для примера попробуйте написать простое предупреждение, которое будет выводить строку Hello, World!:

    Нажмите Enter. В браузере появится всплывающее окно:

    Обратите внимание: консоль также распечатает результат вычисления выражения, которое будет читаться как undefined.

    Консоль может также логировать данные JavaScript с помощью console.log.

    Чтобы отобразить строку «Hello, World!» в консоли, введите:

    console.log(«Hello, World!»);
    Hello, World!

    Также консоль может обрабатывать математические вычисления:

    console.log(2 + 6);
    8

    Попробуйте ввести более сложный пример:

    console.log(34348.2342343403285953845 * 4310.23409128534);
    148048930.17230788

    Также консоль может работать с несколькими строками и переменными:

    let d = new Date();
    console.log(«Today’s date is » + d);
    Today’s date is Mon Jul 03 2017 16:06:51 GMT+0300

    Если вам нужно изменить команду, которую вы ранее вводили в консоль, нажмите клавишу со стрелочкой вверх ↑ на клавиатуре. Это позволит вам отредактировать команду и запустить ее снова.

    Окружение JavaScript Console подобно оболочке терминала, что позволяет протестировать код в режиме реального времени.

    Работа с HTML-файлами

    В консоли можно работать в контексте HTML-файла или страницы с динамической визуализацией. Это дает возможность поэкспериментировать с кодом JavaScript в контексте HTML, CSS и JavaScript.

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

    Гайд для начинающих: как написать JavaScript

    Современный интернет немыслим без скриптов. Учимся писать на JavaScript.

    Если бы для интернета писали Библию, она начиналась бы так:

    Сначала была почта. И увидели инженеры, что это хорошо. И создали они WWW с гиперссылками. И увидели инженеры, что это тоже хорошо. И создали они тогда язык JavaScript для оживления страничек.

    Примерно так происходило в реальности. JavaScript придумали, чтобы «оживить» HTML. Скрипты JavaScript пишутся непосредственно в текст HTML или хранятся в отдельных файлах, как и стили CSS. Они выполняются сразу после загрузки страницы в браузер.

    Даже сам язык в первое время назывался LiveScript. Потом его переименовали в JavaScript, потому что планировали как-то увязать с языком общего назначения Java. Но сейчас у них нет практически ничего общего, а JavaScript — совершенно независимый язык программирования со своей четкой спецификацией ECMAScript.

    Формально JavaScript является торговой маркой Oracle, а этот язык — «расширение» ECMAScript, наряду с JScript от Microsoft и ActionScript, но это скорее заморочки владельцев торговых марок. Главное, что свободный ECMAScript никому не принадлежит.

    Со временем сфера влияния JavaScript значительно расширилась. Его начали использовать не только для скриптов на странице HTML, но и для серьезных больших веб-приложений и целых программ, которые работают в браузере. Есть инструменты, чтобы специальным образом «упаковать» эти программы и выполнять их отдельно от браузера. Это компиляторы и интерпретаторы, которые более подробно рассматриваются на обучающих курсах «Java-разработчик» и «Веб-разработчик».

    Приложения JavaScript выполняются в любой среде, где есть соответствующий интерпретатор.

    Нас пока интересуют только браузеры и HTML-странички.

    Как сделать JavaScript? Написать элементарный скрипт не сложнее, чем простую HTML-страничку, ведь скрипты JavaScript пишутся обычным текстом, то есть их можно создавать буквально в том же «Блокноте», сохраняя потом в отдельных файлах или вставляя в тело HTML-документа. Самые простые вещи на JavaScript делаются действительно просто.

    Как написать JavaScript

    Для примера сделаем простой скрипт для выполнения сервером сценариев Windows. Этот скрипт можно написать прямо в «Блокноте» и выполнить без браузера.

    WScript. echo («Привет, Skillbox!«)

    Пишем этот текст в «Блокноте», затем сохраняем файл под именем skillbox.js и запускаем в «Проводнике» Windows.

    Аналогичный скрипт можно записать прямо в коде страницы HTML между тегами . Там уже можно использовать обычные методы JavaScript, а не метод echo специфического объекта WScript. Рассмотрим некоторые из стандартных методов для ввода и вывода данных в браузере.

    alert()

    Метод alert() отображает окошко с кнопкой «OK». В окне выводится сообщение, которое указано в скобках. Например, «Привет, Skillbox!». То есть в данном случае браузер делает ровно то же самое, что перед этим делал сервер сценариев Windows.

    Эти примеры тоже можно писать в «Блокноте», только сохранять в файлах с расширением HTML. Например, skillbox.htm.

    В качестве аргумента alert() можно указать не только конкретный текст, но и результат каких-либо вычислений или обработки других данных. Например, alert(x), где x вычисляется отдельно.

    confirm()

    Метод confirm() выводит такое же окно с сообщением, но уже с двумя кнопками — «ОК» и «Отмена». В зависимости от того, какую кнопку щелкнет пользователь, метод возвращает либо значение true, либо false. Сервер получает это возвращаемое значение от пользователя и выполняет какое-то действие, в зависимости от ответа.

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

    prompt()

    Метод prompt() выводит диалоговое окно с сообщением и текстовым полем, куда пользователь вводит данные. Здесь тоже предусмотрены две кнопки «ОК» и «Отмена». По нажатию первой кнопки метод возвращает на сервер введенный текст, а по нажатию второй кнопки возвращает логическое значение false.

    Синтаксис здесь такой:

    prompt (сообщение, значение_поля_ввода_данных)

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

    Возможности современного JavaScript выходят далеко за рамки примитивного ввода-вывода данных через формы. Эти методы мы привели только в качестве самых простых примеров. Кроме этого, JavaScript позволяет реагировать на действия пользователя. Например, на движения мышкой или нажатие определенных клавиш. JavaScript часто используется для обеспечения асинхронной работы (Технология AJAX), когда информация на странице обновляется без ее перезагрузки. В этом режиме данные отправляются на сервер и загружаются оттуда в интерактивном режиме. Кроме того, JavaScript способен манипулировать с HTML-элементами на странице (создавать и прятать теги и т.д.) и делать многое другое.

    Полезные инструменты

    Консоль разработчика

    Во всех популярных браузерах есть специальная консоль разработчика. Она показывает код скриптов на странице, а также выводит другую полезную информацию. В Chrome, Firefox и IE консоль разработчика открывается по нажатию горячей клавиши F12, в Safari — Ctrl+Shift+I или Ctrl+Alt+C. На скриншоте скрипты отображаются справа вверху, вместе с другими элементами веб-страницы.

    Редакторы кода

    В дальнейшем для удобного программирования понадобится установить редактор кода или IDE (Integrated Development Environment), интегрированную среду разработки. IDE — это редактор с расширенной функциональностью, который интегрирован с другими полезными инструментами, поддерживает подключение дополнительных модулей и так далее.

    Для начала можно рекомендовать один из легких редакторов:

    В будущем есть смысл присмотреться к IDE:

    Заключение

    Инструкторы на курсе «JavaScript с нуля» посоветуют лучшие инструменты и помогут разобраться с любыми вопросами. Это практический 4-месячный курс для тех, кто хочет научиться основам языка сценариев с индивидуальным наставником, разработать фронтенд для интерактивного веб-проекта и положить кейс к себе в портфолио.

    Курс идеально подойдет дизайнерам-разработчикам и начинающим программистам, кто уже знаком и умеет разрабатывать страницу на HTML и CSS, но не намерен останавливаться в изучении программирования. Преподаватели практически «на пальцах» объяснят базовые основы синтаксиса JavaScript, научат создавать визуальные интерактивные элементы и помогут разработать первый веб-проект на JavaScript.

    Методы консоли в JavaScript

    Методы для работы с консолью. Какие есть методы и примеры их применения. Как вывести стилизованные сообщения в консоль, в табличном виде, в виде js-объекта.

    Консоль браузера — это инструмент значительно облегчающий работу, отладку и поиск ошибок в языке JavaScript. В самом же JS специально для работы с консолью есть объект console.

    Любой новичок изучающий JavaScript знает метод console.log() . А знаете ли Вы, что для консоли в JavaScript есть целая группа методов для объекта console, а не только метод console.log?

    Ниже описаны доступные для объекта Console методы и приведены несколько примеров их использования.

    Методы Console

    Самый простой и самый распространённый способ для вывода чего-либо в консоль в JS — это вызов метода

    В методы для консоли можно передавать неограниченное число аргументов, разделённых запятыми:

    В результате в консоли все эти аргументы будут объеденены в одну строку через пробелы:
    Ещё вариант простого сообщения 1 2 3 4

    Так же в console.log можно использовать маркер строковой интерполяции %s , их ещё называют подстановочные символы (маски).

    Первым аргументом идёт сообщение с символами, которое будет выведено в консоли, а все остальные аргументы (второй, третьий и т.д.) — будут заменять маркеры %s в соответствующем порядке (второй аргумент заменит первый маркер, третьий аргумент — второй маркер и т.д.).

    console.dir() — вывод элемента в консоль в виде объекта

    console.log выводит DOM-элементы в консоль как HTML. Чтобы вывести DOM-элемент в консоль в виде объекта используем метод dir()

    Форматированные сообщения консоли

    При выводе в консоль эти методы имеют визуальное оформление, но в каждом браузере это реализовано немного по разному.

    console.info()

    Выводит информационное сообщение. Для форматирования можно использовать подстановочные символы (маски) с дополнительными параметрами.

    console.warn()

    Выводит предупреждающее сообщение. Для форматирования можно использовать подстановочные символы (маски) с дополнительными параметрами.

    console.error()

    Выводит сообщение об ошибке. Для форматирования вы можете использовать подстановочные символы (маски) с дополнительными параметрами.

    В консоли браузера Google Crome эти сообщения будут выглядеть так:

    А вот так это же выглядит в браузере Mozilla Firefox, где видно что в мазиле для info есть иконка:

    console.time()

    Метод time() для объекта консоли, выводит время выполняемого фрагмента кода.

    Особенностью этого метода является то, что обязательно в конце фрагмента кода для которого измеряем время выполнения должен быть вызов timeEnd() , а аргументом и для time, и для timeEnd должно быть передано название измеряющего таймера. Так определяется начало и конец куска кода для которого установлен таймер замера.

    Таймеров может быть установлено неограниченное количество, главное не забывать в конце фрагмента кода ставить console.timeEnd(‘Name’)

    console.group()

    Создает новую группу сообщений в веб-консоли. После вызова последующие сообщения, выводимые в консоль, будут иметь дополнительный уровень отступа, до тех пор пока не будет вызван метод console.groupEnd() .

    Пример — чтобы было понятнее, я пробелами и табами разделю на группы:

    Теперь в консоли можно сворачивать сообщения согласно их групп. При этом поддерживается вложенность:

    console.table()

    Метод console.table() позволяет вывести данные в консоль в виде таблицы. Эта возможность не является стандартной и стандартизировать её пока никто не собирается. И хоть метод не стандартизированный, он поддерживается в браузерах Crome, Firefox и многих других.

    Имеет следующий синтаксис:

    При выводе данных в консоль в виде таблицы, у таблицы всегда будет первым столбиком индексовая колонка.

    Как пример использования метода console.table(); , выведу две таблицы в консоль.

    • Первая — выводит квадрат числа из генерируемого через цикл for массива.
    • Вторая — выводит в отдельных колонках имя и фамилию известных героев из Чапаева.

    В консоли мы увидим такую картину:

    При этом если кликнуть на название колонки, то будет выполнена сортировка элементов.

    Читать еще:  Код ошибки 192 в плей маркете
    Ссылка на основную публикацию
    ВсеИнструменты 220 Вольт
    Adblock
    detector