К настоящему времени вы знаете, что Chrome DevTools - это больше, чем просто вкладка с элементами. Вы, вероятно, зашли на вкладку консоли и ввели код, чтобы проверить результат. Но DevTools идет намного дальше - от проверки производительности до тестирования CSS. Есть бесчисленное множество инструментов, которые я даже не знаю, как использовать на данный момент, будучи новичком в мире Javascript.

Сегодня я хотел продемонстрировать инструмент, который может быть очень удобен для новичка в Javascript, за пределами консоли и вкладки элементов. Этот инструмент является инструментом точки останова, к которому можно получить доступ через вкладку «Источник» вашего DevTools.

Как кодировщик, вы должны быть уверены, что постоянно тестируете свой код. Если вы слишком много кодируете без тестирования, вы можете получить ошибку, которую не смогли отловить, потому что вы слишком далеко продвинулись вперед, не убедившись, что ваш код работает правильно. Когда у вас есть ошибки (или, может быть, вы просто хотите проверить, что приравнивается к определенным вещам в вашем коде) Javascript имеет удобный «отладчик», который вы можете разместить в определенном месте вашего кода. Затем, когда вы запустите свой код в браузере, ваш код остановится после того, как попадет в строку кода, в которой есть отладчик. Если вы хотите проверить несколько областей своего кода, вы можете разместить несколько отладчиков. Иногда, будучи новичком в программировании, мы можем получить удовольствие от отладчика и, прежде чем вы это узнаете, мы забываем удалить некоторые из наших отладчиков, и когда мы пытаемся запустить наш код, мы обнаруживаем, что попадаем в случайные отладчики, которые мы установили много лет назад. Кроме того, писать отладчик снова и снова утомительно. Но в конце концов мы должны протестировать наш код.

Хорошо, а что насчет этой вкладки источников, о которой я упоминал? На вкладке «Исходный код» мы можем установить точки останова, которые действуют как отладчик, но нам не нужно ничего вводить. мы просто щелкаем строку кода, на которой мы хотим, чтобы наш код останавливался при запуске, и запускаем наш код. Как только наш код достигает точки останова, мы можем использовать консоль для проверки, как в отладчике. Мы можем проверить значения некоторых переменных, которые были выполнены до сих пор в нашем коде, а также тестовый код в консоли. У вас также будет доступ к инструментам «перейти» и «войти».

Еще одна интересная функция, предоставляемая вкладкой источника, - это возможность добавлять точки останова в прослушиватели событий. Допустим, у вас есть кнопка с событием нажатия, и вы хотите дополнительно изучить элемент, возможно, вы не помните, где находится событие в вашем коде, или хотите проверить другой результат. На вкладке источника у нас есть меню точек останова прослушивателя событий с множеством различных вариантов прослушивателя событий на выбор. Мы можем перейти к раскрывающемуся меню мыши и выбрать вариант «щелкнуть». Теперь, когда мы когда-либо щелкаем что-либо, к чему прикреплен прослушиватель событий щелчка, наш код будет остановлен на этой строке кода, и мы сможем перейти к тестированию кода в консоли.

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

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