Javascript — debugging

Разработка адаптивных веб-приложений

Сегодня адаптивность везде. С распространением мобильных устройств нам нужно адаптировать наши приложения под разные устройства и разрешения. Последние версии Chrome содержат замечательные инструменты, упрощающие нашу работу. Начнем с того, что напишем простую страничку, и в процессе будем работать над ее адаптивностью. Вот наша HTML разметка:


<body>
    <h1>Responsive Web Design</h1>
    <ul class="nav">
        <li><a href="#">About</a></li>
        <li><a href="#">Concept</a></li>
        <li><a href="#">Examples</a></li>
        <li><a href="#">Frameworks</a></li>
        <li><a href="#">Contacts</a></li>
    </ul>
    <section class="concept">
        <p>Responsive web design (RWD) is a web design approach ...
    </section>
    <section class="elements">
        </p>The fluid grid concept calls for page element sizing to be in relative units ...
    </section>
</body>

На странице уже присутствуют базовые стили. Элементы меню выстроены в ряд один за другим, а две секции размещены бок о бок. Результат выглядит следующим образом:

С имеющимся HTML и CSS мы можем начать экспериментировать. Давайте зададим условия для медиа-запросов

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

Настройка области просмотра

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

Заметьте, что при изменении размера области просмотра, мы видим ее размер в правом верхнем углу. Эта маленькая подсказка отменяет необходимость ручной проверки размера окна. В нашем случае, обе секции становятся слишком узкими при ширине в 500px. А это уже место для нашего первого медиа-запроса:

section {
    float: left;
    width: 50%;
}
@media all and (max-width: 550px) {
    section {
        float: none;
        width: 100%;
    }
}

Если мы дойдем до области примерно в 550px, то можно заметить, что у навигации появляется горизонтальная полоса прокрутки где-то в области 540px. Новый медиа-запрос решает эту проблему:

.nav {
    list-style: none;
    margin: 10px auto;
    padding: 0;
    width: 510px;
}
.nav li {
    float: left;
    margin: 0 20px 0 0;
}
@media all and (max-width: 540px) {
    .nav {
        width: auto;
    }
    .nav li {
        float: none;
        margin: 0;
        padding: 0;
        text-align: center;
    }
}

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

Симуляция устройств

Часто мы получаем отчеты об ошибках, что наше приложение не совсем корректно работает на некоторых устройствах. Для решения этой проблемы можно воспользоваться Chrome, у которого есть возможность симуляции различных устройств. Он выставляет точный размер экрана, а также выставляет правильные HTTP-заголовки. Так что мы можем видеть примерно такой же результат, какой видят наши пользователи. Определение браузера прсредством JavaScript тоже будет работать, так как браузер изменяет заголовки запроса.

Скажем, нам нужно симулировать iPhone5. На выдвигающейся панели консоли есть вкладка “Emulation” (“Эмуляция”).

Мы выбираем устройство, и Chrome применяет настройки к секциям Screen (размер экрана), User Agent и Sensors (датчики). Браузер даже эмулирует события тача.

Изменяем DOM с помощью панели Elements

Наша страница теперь адаптивна, но на каком-то этапе нам нужно что-то изменить. С помощью Chrome мы можем просмотреть, какие стили сейчас применены к документу. Например, текст в первой секции слишком большого размера. Мы хотим изменить размер текста, а также его цвет.

Панель Elements также полезна, когда нам нужно просмотреть специфичное правило CSS, но мы не знаем, где оно определено. С правой стороны есть секция, которая показывает просчитанный набор стилей, примененных к текущему элементу, и их можно изменять.

Панель инструментов разработчика

Иногда нам нужно найти конкретные CSS стили, но их трудно найти из-за обилия определений. НА панели инструментов разработчика имеется поле фильтра. Скажем, мы хотим просмотреть правила для элемента , к которому применен класс . Вот как это можно сделать:

Debugging Tests with Mocha

Open and review the code that’s been written to test the code in . If you’ve never used Mocha before, you need to install it globally first in order to run the tests.

You can also run to execute the tests. You should get the following output:

All the tests are failing. To find out the problem, we’re going to run the tests in debug mode. To do that, we need a new configuration. Go to the debug panel and click the dropdown to access the option:

The file will open for you with a popup listing several configurations for you to choose from.


Simply select Mocha Tests. The following configuration will be inserted for you:

The default settings are fine. Go back to the dropdown and select Mocha Tests. You’ll need to comment out the last three lines you added in ; otherwise the tests won’t run as expected. Go back to and add a breakpoint on the line just before where the first test failure occurs. That should be line seven, where it says:

Make sure to add a expression in the watch section. Hit the Play button to start the debugging session.

At the start of the test, should read zero. If you hit Step over, reads 2, yet only one place has been added. How can that be?

Restart the debugging session, and this time use Step into to navigate to the function. The debugger will navigate you to . The value of is still zero. Click Step over to execute the current line.

Aha! The value of just incremented by 1, yet we haven’t added anything to the array. The problem is caused by the operator which is mutating the array’s length. To fix this, simply replace the line with:

This way, we can safely get the value of without changing the value of . While we’re still in debug mode, let’s try to fix another problem where the property is given the value while is 1. The problem seems to be the modulus expression inside the if statement:

Let’s do a quick experiment using the debug console. Start typing a proper expression for the statement:

The debug console is similar to the browser console. It allows you to perform experiments using variables that are currently in scope. By trying out a few ideas in the console, you can easily find the solution without ever leaving the editor. Let’s now fix the failing if statement:

Restart the debug session and hit Continue to skip the current breakpoint. The first test, “can add a place”, is now passing. But the second test isn’t. To fix this, we need another breakpoint. Remove the current one and place a new breakpoint on line 16, where it says:

Start a new debugging session:

There! Look at the Variables section. Even before the second test begins we discover that the array already has existing data created by the first test. This has obviously polluted our current test. To fix this, we need to implement some kind of function that resets the array for each test. To do this in Mocha, just add the following code before the tests:

Restart the debugger and let it pause on the breakpoint. Now the array has a clean state. This should allow our test to run unpolluted. Just click Continue to let the rest of the test code execute.

All tests are now passing. You should feel pretty awesome, since you’ve learned how to debug code without writing a single line of . Let’s now look at how to debug client-side code using the browser.

JS Tutorial

JS HOMEJS IntroductionJS Where ToJS OutputJS StatementsJS SyntaxJS CommentsJS VariablesJS OperatorsJS ArithmeticJS AssignmentJS Data TypesJS FunctionsJS ObjectsJS EventsJS StringsJS String MethodsJS NumbersJS Number MethodsJS ArraysJS Array MethodsJS Array SortJS Array IterationJS DatesJS Date FormatsJS Date Get MethodsJS Date Set MethodsJS MathJS RandomJS BooleansJS ComparisonsJS ConditionsJS SwitchJS Loop ForJS Loop WhileJS BreakJS Type ConversionJS BitwiseJS RegExpJS ErrorsJS ScopeJS HoistingJS Strict ModeJS this KeywordJS LetJS ConstJS Arrow FunctionJS DebuggingJS Style GuideJS Best PracticesJS MistakesJS PerformanceJS Reserved WordsJS VersionsJS Version ES5JS Version ES6JS JSON

Исполняем HTTP запросы

Веб-разработчикам иногда нужно выполнять HTTP запросы к нашим приложениям. Может, мы разрабатываем REST API, или у нас есть PHP-скрипт, принимающий POST-запросы. Существует утилита командной строки под названием cURL. Наверное, это самый используемый инструмент для совершения запросов.

С помощью cURL нам нет необходимости переходить в терминал. Существует плагин DHC (клиент REST HTTP API). Это расширение дает полный контроль над HTTP-запросом. Мы можем изменить метод запроса, заголовки, GET и POST параметры. Оно также отображает результат запроса и его заголовки. Очень полезный инструмент.

Check your units!

This basically means knowing for example when to use degrees vs when to use radians. It’s unfortunate that THREE.js does not consistently use the same units everywhere. Off the top of my head the camera’s field of view is in degrees. All other angles are in radians.

The other place to look out is your world unit size. Until recently 3D apps could choose any unit size they wanted. One app might choose 1 unit = 1cm. Another might choose 1 unit = 1 foot. It’s actually still true that you can chose any units you want for certain applications. That said, THREE.js assumes 1 unit = 1 meter. This is important for things like physically based rendering which uses meters to compute lighting effects. It’s also important for AR and VR which need to deal with real world units like where your phone is or where the VR controllers are.

Как использовать отладчик JavaScript

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

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

  • Используйте много комментариев. Комментарии позволяют вам объяснить, почему вы написали сценарий так, как вы это делали, и объяснить особенно сложные разделы кода.
  • Всегда используйте отступы, чтобы ваш код был легко читаемым. Отступы также облегчают вам сопоставление начальных и конечных тегов, фигурных скобок и других элементов HTML и скрипта.
  • Напишите модульный код. По возможности группируйте свои заявления в функции. Функции позволяют группировать связанные операторы, а также тестировать и повторно использовать части кода с минимальными усилиями.
  • Будьте последовательны в том, как вы называете свои переменные и функции. Попробуйте использовать имена, которые достаточно длинны, чтобы быть значимыми и описывать содержимое переменной или назначение функции.
  • Используйте согласованный синтаксис при именовании переменных и функций. Другими словами, держите их в нижнем регистре или в верхнем регистре; если вы предпочитаете нотацию Camel-Back, используйте ее последовательно.
  • Проверять длинные скрипты модульным способом. Другими словами, не пытайтесь написать весь скрипт перед тестированием любой его части. Напишите часть и запустите ее, прежде чем добавлять следующую часть кода.
  • Используйте описательные имена переменных и функций и избегайте использования односимвольных имен.
  • Следите за кавычками. Помните, что кавычки используются парами вокруг строк и что оба кавычки должны быть одного и того же стиля (одного или двух).
  • Следите за своими равными знаками. Вы не должны использовать один = для целей сравнения.
  • Явным образом объявляю переменные с помощью ключевого слова var.

Общаясь недавно со своими коллегами, я был удивлен тем, что многие ни разу не использовали в своей работе встроенные в браузер отладчик консоли для JavaScript. К сожалению, один из них работает в моей фирме, не буду оглашать его имени. Для тех из вас, кто пока не знаком с консолью браузера API, и написана эта статья.

Выделение сообщений


В выше приведенном примере цикл будет выводить много значений переменных в консоль. Однако, часто бывает удобно визуально разделять различные данные, чтобы эффективно выделять в коде места, требующие повышенного внимания. Для решения таких задач Console API имеет несколько методов.

console.info(): выводит иконку «информация» и выделяет цветом представляемую информацию. Данный метод удобно использовать для предупреждения о различных событиях.

console.warn(): выводит иконку «предупреждение»  и выделяет цветом представляемую информацию. Удобно использовать для информации о выходе параметров за рамки ограничений.

console.error(): выводит иконку «ошибка» и выделяет цветом  представляемую информацию. Удобно использовать для представления информации об ошибках и критических условиях.

Примечание: инструмент разработчика Chrome не имеет средств для различного представления информации в консоли.

5 последних уроков рубрики «Разное»

  • Выбрать хороший хостинг для своего сайта достаточно сложная задача. Особенно сейчас, когда на рынке услуг хостинга действует несколько сотен игроков с очень привлекательными предложениями. Хорошим вариантом является лидер рейтинга Хостинг Ниндзя — Макхост.

  • Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

    Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

  • Создание вебсайта — процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.

  • Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.

Конфигурация

Есть два вида конфигурации отладчика: launch и attach. Устанавливаются они в опции request. Выбирать нужный вид можно для каждого отдельного объекта конфигурации.

Launch

Конфигурация Launch предполагает запуск отдельного экземпляра Chrome, в котором выполняется указанный файл или URL.

Если вы указываете URL, вам нужно указать директорию, файлы которой обслуживаются, в опции webRoot. Это можно сделать путем указания абсолютного пути или с использованием преобразователя ${workspaceFolder} (он указывает на папку, открытую в вашем рабочем пространстве Visual Studio Code).

Примечание: будьте осторожны при указании webRoot, поскольку эта опция используется, чтобы резолвить URL к файлам на вашем компьютере.

В примере вы можете видеть два варианта конфигурации launch: один предполагает запуск локального сервера, а другой – отдельного файла.

{ «version»: «0.2.0», «configurations»: [ { «type»: «chrome», «request»: «launch», «name»: «Launch Chrome against localhost», «url»: «http://localhost:8080», «webRoot»: «${workspaceFolder}» }, { «type»: «chrome», «request»: «launch», «name»: «Open a specific file», «file»: «${workspaceFolder}/index.html» } ] }

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

Примечание: когда вы остановите отладчик, окно Chrome закроется.

Attach

Лично я предпочитаю этот вариант. Эта конфигурация присоединяет отладчик к запущенному экземпляру Chrome. Но чтобы этот вариант работал, вам нужно запустить Chrome с включенной опцией удаленной отладки. Как это сделать, зависит от вашей операционной системы.

Windows

Есть два способа запустить Chrome с удаленной отладкой в Windows. Самый простой – кликнуть правой кнопкой мыши по ярлыку Google Chrome. Затем нужно выбрать нужную опцию в свойствах и добавить следующую команду в поле target.

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

Другой способ – открыть командную строку и выполнить в ней следующую команду (заменив при этом <chrome_path> на настоящее местоположение установки вашего Chrome):

Linux

Указанные команды (во всех трех вариантах) открывают Chrome с дополнительной опцией, которая указывает порт для удаленной отладки – 9222. Узнать больше по этой теме можно здесь.

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

Вот пример конфигурации attach:

{ «version»: «0.2.0», «configurations»: [ { «type»: «chrome», «request»: «attach», «name»: «Attach to Chrome», «port»: 9222, «url»: «http://localhost:3000», «webRoot»: «${workspaceFolder}/src» } ] }

Примечание: если вы не установите опцию «url», вам будет предложен список из ваших открытых вкладок.

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

Заключение

Поздравляем! Вы научились устанавливать и настраивать отладчик для Chrome в Visual Studio Code. Также вы научились запускать Google Chrome с включенной возможностью удаленной отладки. Теперь пора исследовать это расширение и углубить свои знания. Я настоятельно советую изучить репозиторий этого расширения.

Прерывание хода выполнения скрипта

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

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

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

Для установки точки прерывания нужно перейти на закладку ‘Scripts’ и выбрать нужный скрипт из списка. Теперь ищем строку, где нужно прервать ход выполнения скрипта, и жмем на поле с номером строки для активации — появится визуальный индикатор. Теперь перегружаем страницу и выполнение кода прервется в заданной точке:

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


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

“Continue”: продолжает выполнение кода до следующей точки прерывания.

“Step Over”: выполняет следующую строку кода. Если код вызывает другую функцию, то отладчик не будет «погружаться» в ее код.

“Step Into”: похоже на «Step over», за исключение того, что при вызове функции, отладчик переходит к первой строке внутри кода функции.

«Step Out»: если вы вошли в код функции с помощью кнопки «Step Into», то нажатие кнопки «Step out» вызовет выполнение кода функции до конца и переход к родительской функции.

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

Условные точки прерывания

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

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

Для активации условного прерывания нужно нажать правую клавишу мыши на точке прерывания и выбрать пункт ‘Edit Breakpoint’ для вывода диалога редактирования условий формирования прерывания.

Установка точки прерывания в коде

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

if (total_photos_diff > 300) {
          debugger;     // запускаем отладчик и прерываем выполнение кода
}

Отладка тестов JS Unit

Это упражнение демонстрирует, как можно использовать IDE для отладки файлов JavaScript при ошибке тестирования модуля.

  1. Разверните папку js в окне ‘Проекты’ и дважды щелкните файл controllers.js, чтобы открыть файл в редакторе.
  2. Измените строку 7 в файле для внесения следующих изменений (выделеныполужирным шрифтом). Сохраните изменения.
    function PhoneListCtrl($scope, Phone) {
      $scope.phones = Phone.query();
      $scope.orderProp = 'name';
    }

    При сохранении изменений страница автоматически перезагружается в браузере. Отображается изменение порядка телефонов в списке.

  3. Убедитесь, что сервер JS Test Driver запущен и что сообщение состояния отображается в окне браузера Chrome.
  4. Щелкните правой кнопкой мыши узел проекта в окне ‘Проекты’ и выберите команду ‘Тестирование’.

    При запуске теста можно увидеть, что в одном из тестов произошла ошибка с сообщением, что значение «name» было обнаружено вместо ожидаемого значения «age».

  5. Откройте вкладку ‘Выполнение тестов JS unit’ в окне ‘Выходные данные’.

    Отображается сообщение о том, что orderProp должно быть age в строке 41.

  6. Щелкните ссылку на вкладке ‘Выполнение тестов модулей JS’ для перехода к строке, в которой в тесте произошла ошибка. Файл теста controllersSpec.js открывается в редакторе в строке 41 (выделена полужирным шрифтом)
    it('should set the default value of orderProp model', function() {
          expect(scope.orderProp).toBe('age');
        });

    Видно, что в тесте ожидалось «age» как значение scopeOrder.prop.

  7. Установите точку останова в строке, где в тесте произошла ошибка (строка 41).
  8. Щелкните правой кнопкой мыши узел проекта в окне ‘Проекты’ и выберите ‘Тестирование’.

    При повторном запуске теста счетчик программы достигнет точки останова. При наведении курсора на scopeOrder.prop в подсказке видно, что переменная имеет значение «name» при достижении точки останова.

    В качестве альтернативы можно выбрать ‘Отладка’ > ‘Оценка выражений’ в главном меню, чтобы открыть окно ‘Оценка кода’. При вводе выражения scopeOrder.prop в окне и нажатии кнопки ‘Оценить фрагмент кода’ () (Ctrl-Enter) в отладчике отображается значение выражения в окне ‘Переменные’.

  9. Нажмите кнопку ‘Продолжить’ на панели инструментов, чтобы завершить выполнение теста.

С этим читают