Спасибо за понятное объяснение !!! Видно ,что вы очень хорошо готовитесь, прежде чем записать новое видео. У вас прямо чувствуется забота о ваших подписчиках и слушателях. Всё стараетесь разжевать и разложить по полочкам ))
одно из самых важных вещей в уроках и обучении это то что не засыпаешь во время объяснений. столько много хороших преподавателей, но абсолютно не умеют рассказывать. Владилен не такой случай, интересно и понятно. спасибо за контент. подписался и изучаю остальные видео.
Спасибо автору за такую подачу информации и за тему. Для новичков дебаг очень полезен, а как с ним правильно работать мало кто знает. Ваше видео многое объясняет. Ещё раз спасибо
Спасибо Владилен за новое видео, почти все эти моменты знал кроме некоторых методов у консоли и брекпоинтов по условию(почти не пользовался данным способом). Сейчас при большой популярности фреймворков в основном приходиться дебажить через расширения tools для них - будь то vue(x) или react(redux) где видны данные по виртуальному дом. И до сих пор не могу понять почему так много хейтеров по языку JS, которые называют его недоязыком, сейчас особенно в последних версиях JS как по мне догнал по уровню другие популярные языки, на нем относительно приятный и лаконичный синтаксис, и можно быстро выразить ввиде кода пришедшую мысль(как на питоне), много инструментов, большое сообщество, в общем мне не понятен большой негатив в его сторону...
Ну язык спрогнеснул за несколько лет, попробуй раньше работать без класов, промисов(посмотри callback hell), работать без темплайт стринг,без спред операторов, без стрелочных функций , без Object.assign(просто скопировать обект раньше был тот еще квест) без тайп скрипта и т.д. JS сейчас это много сгорелых пуканов разрабов раньше, эт точно.
Очень содержательный, структурированный пример! Часто в примерах много лишнего. Круто, представить не мог, что так легко можно понять, такой бы ролик про метод this!! Еще раз! Круто! Спасибо!
Большое спасибо за это видео! Я посмотрел до этого урока пару других видео насчет дебаггера и вообще ничего не понимал. Это же видео просто открыло глаза, получилось решить задачу, которая ранее не решалась
I know Im randomly asking but does someone know a method to log back into an Instagram account..? I somehow lost the login password. I would appreciate any help you can give me
лайк, но надеюсь это только первый ролик в теме "Dev Tools" и дальше будут ещё.. особенно интересует тема оптимизации приложения, работа с вкладками Memory, Performance, Audits. Ещё хотелось бы видео "лайф-дебаг" сложного приложения, написанного на каком-нибудь популярном фреймворке с кучей сторонних библиотек - просто чтоб наглядно увидеть как в таком случае быстро и умело пользоваться брейкпойнтами и логированием для поиска ошибок)
Владилен, это просто Великолепный материал!) Спасибо тебе Огромное за твой Труд по созданию такого понятного видео, очень помогло!) Да прибудет с тобой Светлая Сторона Силы!) 🤞🤞🤞🤞💪💪💪
Таймкоды: 12:30 При переходе в место в коде (во вкладке Sources) с ошибкой в консоли крестиком отмечена неработающая часть кода 14:50 Клик по элементу в консоли подсветит его на экране 23:50 Брейкпоинты. Установка брейкпоинтов. Срабатывает перед выполнением строки, на которой стоит. Что это дает 26:05 Кнопка продолжить выполнение скрипта, Кнопка перейти к следующему шагу (не входя/не проваливаясь внутрь текущей функции(если мы стоим на функции)) на этом уровне вложенности (пропуская ее вызов). Шорткаты 27:15 При наведении на переменные подсвечивается что он из себя представляет (что содержит), если на функцию - подскажет (в виде ссылке) где эта функция определена 28:00 Останавливаясь на брейкпоинте в рантайме хранятся все значения переменных именно на момент брейкпоинта и мы можем обратиться к ним в консоли «в реальном времени» 28:35 Находясь в Sources нажать ESC 2 раза чтобы открыть параллельно консоль 29:00 Правый сайдбар 29:00 Scope (Область действия) - это все окружения участка кода. Тут есть: 1 Local - (Локальное окружение) Все локальные переменные (и контекст тут есть (this)) и их значения, определенные на момент брейкпоинта. 2. Closure - Модуль (Внешнее окружение) (Это Замыкания) 3. Global - Глобальное окружение (переменные объекта window). 30:20 Как найти и нырнуть в нужную функцию (просто клик по ссылке, где она определена) 31:00 Кнопка перейти в функцию колбэка, Кнопка перейти к следующему шагу, заходя внутрь функции (прям шаг за шагом чтобы идти) 32:00 Callstack - Стек вызовов (В Сайдбаре) - Все функции, которые были вызваны, чтобы заработал данный участок кода 32:45 Внесение изменений в код прямо в DevTools (вкладка Sources). Ctrl+S - чтобы сохранить изменения в коде и они применились. 33:45 Кнопка Временное отключение брейкпоинтов без их удаления (Deactivate Breakpoints) 35:20 Watch - (Наблюдатели за переменными) (В Сайдбаре - самое верхнее поле) 38:10 Полное удаление брейкпоинтов 38:50 Добавление брейкпоинтов по условию 42:20 Добавление брейкпоинтов через редактор кода. Ключевое слово debugger 40:53 Добавление брейкпоинтов по событиям. Event Listner Breakpoints. Срабатывает на выбранный тип события, если таковое есть в нашем коде. Остановка происходит на функции-колбэке, которую вызывает событие 44:15 console.trace() - При размещении этого кода в функции мы получим в консоли весь стек вызовов, который привел к срабатыванию функции в которой лежит console.trace() . Порядок отображения вызовов снизу вверх 45:25 Кнопка для быстрого нахождения элементов в коде по клику на них 46:00 Быстрый доступ к выделенным элементам в консоли. Без querySelector. $0 - $4 47:40 Быстрый доступ к элементам в консоли без querySelector (как в jqwery) $(‘.class’) 49:45 Вывод массива объектов в табличном виде. console.table() 50:35 Проверка времени выполнения кода (проверка производительности). console.time(‘id’) + console.timeEnd(‘id’) 52:55 Вкладка Network 55:15 Форматирование кода для лучшего восприятия во Вкладке Network. Кнопка PrettyPrint 56:15 Разбор асинхронного запроса во Вкладке Network. Сервис jsonplaceholder
800-ый лайк :) Отличная тема, обязательно для комфортрой разоаботки. По привычке всегда юзаю console , а тут такая развернутая инфа про debugger и breakpoints, спасибо, определённо все это обязательно буду применять. Я только не знаю как детектить ошибки при компиляции. Например, если работать с Vue.js, там порой всплывают такие ошибки, что их невозможно определить (пишет название компонента не всегда), но где конкретно, на какой строке может не сообщить, вот в таких моментах ступор и не знаешь, что делать...
Владилен, здравствуйте, не могли бы заснять подробное руководство по использованию git? Начиная с основных до продвинутых задач. Я благодарен Вам за уроки и буду еще больше.
можно сделать продолжение по девтулам - ndb модуль отладки node.js - юзаю его недавно и наверняка не все его возможности еще изучил - ну и да - шикарное изложение любого материала - все видео автора буду штудировать - респект
Владилен, спасибо большое за видео. На 24й минуте показываете Devtools - Source и код js у Вас выглядит как в редакторе с подсветкой синтаксиса. У меня в хроме весь скрипт одним цветом, без каких либо подсветок. И без возможности посмотреть значения переменных
Полезное видео, спасибо, но как тут уже писали, очень круто было бы посмотреть отладку средствами WS. В сети много мануалов на эту тему, но все они весьма запутаны или я просто не нашел нормальный
Добый день. Помогите, пожалуйста. Я создаю файлы на хостинге и пытаюсь подключиться к нему через vsc. Когда сервер просит пароль, расширение sftp просто тупо молчит. Как вы работаете с файлами на сервере?
Спасибо, много полезного. Было бы здорово дебаг по Vue js, особенно поиск ошибок внутри файлов самого vue, а то у меня все работает, но ошибка вылезает, откуда не понятно.
Всем привет. Извиняюсь за возможно нелепый или неправильный вопрос - как с помощью DevTools в определенных случаях можно понять что к примеру проблема web приложения на стороне фронта или бэка. Есть ли может какие-нибудь лайфхаки или четкие примеры, по которым это можно понять. Например по разделу Response, или что-нибудь надо посмотреть в Network. Заранее спасибо за ответ ! Всем хорошего дня
Спасибо за курс. очень полезный. Скажите а можно ли повесить javascript (или CSS) на элемент div и превратить его в ссылку? Пример: kupistul_ua_stul-vital_512909 (нижние подчеркивания вместо точки и слешей) Ссылка характеристики. Не могу понять как она сделана и как к ней достучаться. Спасибо
Спасибо за понятное объяснение !!! Видно ,что вы очень хорошо готовитесь, прежде чем записать новое видео. У вас прямо чувствуется забота о ваших подписчиках и слушателях. Всё стараетесь разжевать и разложить по полочкам ))
Ну а как иначе)
одно из самых важных вещей в уроках и обучении это то что не засыпаешь во время объяснений. столько много хороших преподавателей, но абсолютно не умеют рассказывать. Владилен не такой случай, интересно и понятно. спасибо за контент. подписался и изучаю остальные видео.
Наконец стало понятно, как пользоваться дебаггингом. Это лучшее объяснение, из всех, что мне встретились. Спасибо, Владилен, за труд и доброе дело.
Спасибо автору за такую подачу информации и за тему. Для новичков дебаг очень полезен, а как с ним правильно работать мало кто знает. Ваше видео многое объясняет. Ещё раз спасибо
Спасибо Владилен за новое видео, почти все эти моменты знал кроме некоторых методов у консоли и брекпоинтов по условию(почти не пользовался данным способом). Сейчас при большой популярности фреймворков в основном приходиться дебажить через расширения tools для них - будь то vue(x) или react(redux) где видны данные по виртуальному дом. И до сих пор не могу понять почему так много хейтеров по языку JS, которые называют его недоязыком, сейчас особенно в последних версиях JS как по мне догнал по уровню другие популярные языки, на нем относительно приятный и лаконичный синтаксис, и можно быстро выразить ввиде кода пришедшую мысль(как на питоне), много инструментов, большое сообщество, в общем мне не понятен большой негатив в его сторону...
Ну язык спрогнеснул за несколько лет, попробуй раньше работать без класов, промисов(посмотри callback hell), работать без темплайт стринг,без спред операторов, без стрелочных функций , без Object.assign(просто скопировать обект раньше был тот еще квест) без тайп скрипта и т.д. JS сейчас это много сгорелых пуканов разрабов раньше, эт точно.
@@SilverHarold с фишками ES6 программировать на JS стало просто в кайф 😋
Очень содержательный, структурированный пример! Часто в примерах много лишнего. Круто, представить не мог, что так легко можно понять, такой бы ролик про метод this!! Еще раз! Круто! Спасибо!
Большое спасибо за это видео! Я посмотрел до этого урока пару других видео насчет дебаггера и вообще ничего не понимал. Это же видео просто открыло глаза, получилось решить задачу, которая ранее не решалась
Спасибо за видео. Полезный контент. Было бы круто продолжить эту тему и запилить про дебаг через вебшторм, и как его синхронизировать с хромом.
и про дебаг в vscode - chrome тоже актуально
I know Im randomly asking but does someone know a method to log back into an Instagram account..?
I somehow lost the login password. I would appreciate any help you can give me
@Wyatt Zain instablaster ;)
лайк, но надеюсь это только первый ролик в теме "Dev Tools" и дальше будут ещё.. особенно интересует тема оптимизации приложения, работа с вкладками Memory, Performance, Audits. Ещё хотелось бы видео "лайф-дебаг" сложного приложения, написанного на каком-нибудь популярном фреймворке с кучей сторонних библиотек - просто чтоб наглядно увидеть как в таком случае быстро и умело пользоваться брейкпойнтами и логированием для поиска ошибок)
Так и не появилось спустя 2 года... А очень жаль - до сих пор актуально. Инфы нет. А вот ищу (((
Он сам так дебажить не умеет 😂
Отличный урок. Много нового и очень полезного для моей работы почерпнул из вашего видео
Спасибо большое!
Благодарю за видео! Нашёл несколько интересных фитч для себя. Теперь жду не дождусь когда буду использовать )
Мерси, материал хорошо подал. Предварительно прочитал пару статей на тему девтулс, но так понятнее стало, спасибо!
Лучший канал по изучению JavaScript!
Ещё Алекс Луценко
@@misteranderson6058 ссылку можно?
@@misteranderson6058 нашёл. не Луценко а Лущенко - угум?
Шикарный ролик! Узнал много нового, что значительно облегчит отладку. Спасибо!
Спасибо. Мой преподаватель по js, рекомендовал ваше видео
Спасибо, Владилен! Часть я уже знал, но некоторые, особенно про браузер - космос. Спасибо. Будем развиваться дальше
Большое спасибо за работу!
Владилен, Вы тролль 42-го левела ) Так держать
Очень полезное видео. Must know каждый javascript developer 👍
Про Pretty print - вообще бомба... Фиг я до этого раньше догадывался...
Спасибо
Очень много нового и полезного узнал, Спасибо Владилен!
Спасибо, Владилен. Понял, что дебажить веб в браузере (где уже всё есть) быстрее, чем мобильные приложения
Было очень интересно. Про некоторые способы узнал в этом видео. Спасибо!
Спасибо большое за этот ролик, ибо читать про дебаггинг по статьям мне было сложно, понимал только процентов 50
Владилен, это просто Великолепный материал!) Спасибо тебе Огромное за твой Труд по созданию такого понятного видео, очень помогло!)
Да прибудет с тобой Светлая Сторона Силы!) 🤞🤞🤞🤞💪💪💪
Таймкоды:
12:30 При переходе в место в коде (во вкладке Sources) с ошибкой в консоли крестиком отмечена неработающая часть кода
14:50 Клик по элементу в консоли подсветит его на экране
23:50 Брейкпоинты. Установка брейкпоинтов. Срабатывает перед выполнением строки, на которой стоит. Что это дает
26:05 Кнопка продолжить выполнение скрипта, Кнопка перейти к следующему шагу (не входя/не проваливаясь внутрь текущей функции(если мы стоим на функции)) на этом уровне вложенности (пропуская ее вызов). Шорткаты
27:15 При наведении на переменные подсвечивается что он из себя представляет (что содержит), если на функцию - подскажет (в виде ссылке) где эта функция определена
28:00 Останавливаясь на брейкпоинте в рантайме хранятся все значения переменных именно на момент брейкпоинта и мы можем обратиться к ним в консоли «в реальном времени»
28:35 Находясь в Sources нажать ESC 2 раза чтобы открыть параллельно консоль
29:00 Правый сайдбар
29:00 Scope (Область действия) - это все окружения участка кода. Тут есть: 1 Local - (Локальное окружение) Все локальные переменные (и контекст тут есть (this)) и их значения, определенные на момент брейкпоинта. 2. Closure - Модуль (Внешнее окружение) (Это Замыкания) 3. Global - Глобальное окружение (переменные объекта window).
30:20 Как найти и нырнуть в нужную функцию (просто клик по ссылке, где она определена)
31:00 Кнопка перейти в функцию колбэка, Кнопка перейти к следующему шагу, заходя внутрь функции (прям шаг за шагом чтобы идти)
32:00 Callstack - Стек вызовов (В Сайдбаре) - Все функции, которые были вызваны, чтобы заработал данный участок кода
32:45 Внесение изменений в код прямо в DevTools (вкладка Sources). Ctrl+S - чтобы сохранить изменения в коде и они применились.
33:45 Кнопка Временное отключение брейкпоинтов без их удаления (Deactivate Breakpoints)
35:20 Watch - (Наблюдатели за переменными) (В Сайдбаре - самое верхнее поле)
38:10 Полное удаление брейкпоинтов
38:50 Добавление брейкпоинтов по условию
42:20 Добавление брейкпоинтов через редактор кода. Ключевое слово debugger
40:53 Добавление брейкпоинтов по событиям. Event Listner Breakpoints. Срабатывает на выбранный тип события, если таковое есть в нашем коде. Остановка происходит на функции-колбэке, которую вызывает событие
44:15 console.trace() - При размещении этого кода в функции мы получим в консоли весь стек вызовов, который привел к срабатыванию функции в которой лежит console.trace() . Порядок отображения вызовов снизу вверх
45:25 Кнопка для быстрого нахождения элементов в коде по клику на них
46:00 Быстрый доступ к выделенным элементам в консоли. Без querySelector. $0 - $4
47:40 Быстрый доступ к элементам в консоли без querySelector (как в jqwery) $(‘.class’)
49:45 Вывод массива объектов в табличном виде. console.table()
50:35 Проверка времени выполнения кода (проверка производительности). console.time(‘id’) + console.timeEnd(‘id’)
52:55 Вкладка Network
55:15 Форматирование кода для лучшего восприятия во Вкладке Network. Кнопка PrettyPrint
56:15 Разбор асинхронного запроса во Вкладке Network. Сервис jsonplaceholder
вроде мелочи когда уже есть багаж опыта))) но всё равно нашёл для себя что-то новое))) спасибо
Лайк за урок - дебагинг в javascript!!!
Жаль нельзя больше одного лайка поставить... Подача материала просто супер!
Super, на вашем примере начала понимать функции :)
Спасибо большое! Объясняете все очень быстро и понятно и по делу! Моему преподу по вебу такое и не снилось...
Вообще круто, спасибо Владилен👍
Очень интересный формат, спасибки
Просто лучший,подача ее скорость все как надо)
Большое спасибо! Хоть и пользуюсь консолью относительно давно, но узнал много нового!
Круто, столько раз хотелось бросить, а нет я уже тут)
Спасибо за видео, Владилен. Даже мне, опытному? было полезно. А для новичков будет просто супер!
Спасибо очень помогло в развитии. Счастья и успехов.
Спасибо большое за такое понятное объяснение!!!
После этого видео теперь буду дебажить не только в консоли))
Спасибо. Хотелось бы еще по остальным вкладкам в devtools.
Спасибо за видео, было бы интересно посмотреть javascript и nodejs в visual studio code. встроенном дебагере.
Как говорится : не так страшен черт, как его рисуют)) Хотелось бы ещё видео про работу с консолью, терминалом, командной строкой
Супер! Много нового узнал. Спасибо тебе
Полезная информация, не жалею что потратил добрый час)
800-ый лайк :) Отличная тема, обязательно для комфортрой разоаботки. По привычке всегда юзаю console , а тут такая развернутая инфа про debugger и breakpoints, спасибо, определённо все это обязательно буду применять.
Я только не знаю как детектить ошибки при компиляции. Например, если работать с Vue.js, там порой всплывают такие ошибки, что их невозможно определить (пишет название компонента не всегда), но где конкретно, на какой строке может не сообщить, вот в таких моментах ступор и не знаешь, что делать...
Спасибо огромное !Супер! 👏
Неужели я наконец-то научусь дебажить жабаскрипт :З
Благодарочка!
Приятного просмотра)
Спасибо за видос. Очень полезный.
Очень круто все показал и объяснил !!!
Полезно, лайк 👍
Спасибо за видео!)
Спасибо большое! Очень полезно, узнал новые фишки, круто
Спасибо большое! Для меня было очень полезно
Очень полезное видео! Спасибо 😇
Хорошая подача материала!
Круто. Спасибо ещё раз
Владилен, здравствуйте, не могли бы заснять подробное руководство по использованию git? Начиная с основных до продвинутых задач. Я благодарен Вам за уроки и буду еще больше.
++++++++++++++++++++++++++
Про Git пока не планирую
Только если про смежные тематики, такие как SCRUM, AGILE
можно сделать продолжение по девтулам - ndb модуль отладки node.js - юзаю его недавно и наверняка не все его возможности еще изучил - ну и да - шикарное изложение любого материала - все видео автора буду штудировать - респект
Спасибо! Отличное видео :)
Владилен красава!
спасибо) норм как всегда)
Отлично! Жду дебаг Vuе в хроме.
Cпасибо Владилен!
дай бог тебе здоровья )))
Владилен, спасибо большое за видео.
На 24й минуте показываете Devtools - Source и код js у Вас выглядит как в редакторе с подсветкой синтаксиса. У меня в хроме весь скрипт одним цветом, без каких либо подсветок. И без возможности посмотреть значения переменных
отличное видео!!! спасибо!
Полезное видео, спасибо, но как тут уже писали, очень круто было бы посмотреть отладку средствами WS. В сети много мануалов на эту тему, но все они весьма запутаны или я просто не нашел нормальный
Подписался дня 4 назад, было 125к. Теперь 127к😲 как ты так быстро ростешь?))
Спасибо за видео.
спасибо за труд. про TDD урок планируете?
Вероятно да
Великолепно!
Полезное видео, некоторые фишки не знал
У меня в хроме в sorces в дебаге нету подсказок и подсветок как на видео непонятно почему
Привет, спасибо за видео! Вопрос: как настроить Chrom что бы можно было править код на вкладке Source?
Топ контент!!!
Про defer не сказал
Добый день. Помогите, пожалуйста. Я создаю файлы на хостинге и пытаюсь подключиться к нему через vsc. Когда сервер просит пароль, расширение sftp просто тупо молчит. Как вы работаете с файлами на сервере?
Урок классный. Но хотелось бы побольше практики
Спасибо, много полезного. Было бы здорово дебаг по Vue js, особенно поиск ошибок внутри файлов самого vue, а то у меня все работает, но ошибка вылезает, откуда не понятно.
спасибо за видео очень полезное видео
Всем привет. Извиняюсь за возможно нелепый или неправильный вопрос - как с помощью DevTools в определенных случаях можно понять что к примеру проблема web приложения на стороне фронта или бэка. Есть ли может какие-нибудь лайфхаки или четкие примеры, по которым это можно понять. Например по разделу Response, или что-нибудь надо посмотреть в Network. Заранее спасибо за ответ ! Всем хорошего дня
Ура новый видос)
Спасибо за курс. очень полезный. Скажите а можно ли повесить javascript (или CSS) на элемент div и превратить его в ссылку? Пример: kupistul_ua_stul-vital_512909 (нижние подчеркивания вместо точки и слешей) Ссылка характеристики. Не могу понять как она сделана и как к ней достучаться. Спасибо
Очень круто)
Супер. Спасибо
$0 - это вообще пушка)))Я не знал)
то что нужно)
Склеивание строк при сложении это прям суперклассика JS )
круто, благодарен
Спасибо за видео
Приятного просмотра
Владилена, Елену и Игоря помню, а Василиса, кто это?
Подруга моя)
Отличное видео.
Благодарю
Момент на ~15 минуте. Можно ещё в тег скрипта добавить проп defer
Очень полезное видео
Like не глядя)
Спасибо огромное
Спасибо!
Узнал кое что новое . 10x !