Svinkovod.ru

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

Пошаговая инструкция по установке Javascript в Гугл Хром

Пошаговая инструкция по установке Javascript в Гугл Хром

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

Что такое Javascript

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

Для чего он нужен в Гугл Хроме

По умолчанию при скачивании браузера Google Chrome JavaScript активирован, то есть в настройках стоит статус «Включено». Но по разным причинам, например, из-за сбоя в системе, принудительного закрытия браузера или активности вирусов, JavaScript может быть отключен. Какие функции возложены на ДжаваСкрипт:

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

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

И это далеко не полный список элементов, за которые отвечает скрипт Джава. Мы перечислили только главные. Если у вас отключен или не работает JavaScript в Google Chrome, то вы автоматически лишаетесь всех вышеперечисленных опций, а значит, ваш серфинг в браузере будет ограничен. Поэтому обязательно активируйте Java и не лишайте себя полезных опций при работе в интернете.

Как включить

Включить Javascript в Гугл Хром

Как включить

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

Для всех сайтов

Удобством использования Гугл Хрома является не только его быстрая работа, но и возможность индивидуальной настройки. Вы можете включить поддержку скрипта как для всех сайтов, так и для конкретных. Для отсутствия каких-либо ограничений, включите ДжаваСкрипт для всех веб-ресурсов:

  1. Запускаете Chrome.
  2. Нажимаете справа вверху на три вертикальные точки.
  3. В выпавшем меню выбираете – «Настройки».
  4. Переходите на страницу с настройками, опускаетесь в самый низ и нажимаете «Дополнительные».
  5. В разделе «Конфиденциальность и безопасность», выбираете пункт «Настройки сайта».
  6. В списке опций переходите в «JavaScript», и в открывшемся окне нужно активировать ползунок в состояние «Включено», перетащить его вправо напротив пункта «Разрешено (рекомендовано)».
  7. Изменения сразу вступают в действие, вам останется только перезапустить браузер.

Для быстрого перехода в меню с настройками JavaScript можно использовать следующий адрес — chrome://settings/content/javascript. Вставьте его в адресную строку и нажмите Enter.

Для отдельных ресурсов

В Гугл Хроме также есть возможность установить индивидуальную настройку для конкретного сайта. Это в том числе касается и скрипта Джава. Подобный вариант может пригодиться в том случае, если вы отключили JavaScript для всех сайтов, например, с целью родительского контроля для ограничения контента в интернете для детей, а когда сами заходите в браузер, то локально активизируете функцию для себя:

  1. В браузере Хром нажимаете на кнопку меню (в правом верхнем углу три точки).
  2. Переходите в настройки.
  3. На странице с настройками нужно открыть раздел «Конфиденциальность и безопасность», через кнопку «Дополнительные».
  4. В этом разделе есть пункт «Настройки сайта», заходите в него.
  5. Ищете «JavaScript», переходите, и если напротив строки «Разрешено» ползунок неактивный, то есть функция для всех сайтов заблокирована, то внизу есть графа «Разрешить».
  6. Нажимаете «Добавить» и вводите туда URL-адрес сайта или нескольких сайтов, для которых хотите снять ограничение.

Есть еще один, более быстрый и простой способ, как активизировать поддержку JavaScript для конкретного сайта. Откройте нужный сайт, справа от адресной строки вы увидите значок замочка. Нажимаете на него и в списке функций выбираете «Настройка сайтов». Браузер вас переносит на страницу с настройками, и вам останется только нажать в разделе «Разрешения» «Активировать JavaScript».

Читайте так же:
Можно ли заблокировать входящие смс

Как отключить Джава Скрипт

Подобным образом, как вы включали ДжаваСкрипт, также можно его и отключить. Если поддержка JavaScript для вас больше не актуальна или вы хотите проверить качество работы браузера без данного скрипта, то таким же путем, через «Настройки», раздел «Конфиденциальность и безопасность», «Настройки сайта», «JavaScript», деактивируйте ползунок напротив пункта «Разрешено» или добавьте отдельные сайты в графу «Блокировать», если вы хотите произвести частичную настройку. Вот так просто решается вопрос с работой JavaScript в браузере Google Chrome.

Как в Хром браузере включить Javascript

Как в Хром браузере включить Javascript

Для корректной работы и отображения различного рода контента браузеру Google Chrome необходимы дополнительные инструменты – плагины, скрипты, ключи программирования. Их отсутствие или неправильная настройка лишает пользователя возможности просмотреть отдельные элементы открываемой страницы, воспользоваться всеми функциями веб-обозревателя. В этой статье мы поговорим о JavaScript: какого его прямое назначение, зачем он нужен и как включить поддержку JavaScript в браузере Chrome.

Что такое JavaScript и зачем он в браузере Google Chrome

JavaScript – это язык программирования, с помощью которого страницы веб-ресурсов становятся интерактивными. Скрипты (программы на ДжаваСкрипт) позволяют осуществлять взаимодействие с сайтами: заполнять формы обратной связи, оставлять комментарии, просматривать всплывающие подсказки и др.

Также ДжаваСкрипт отвечает за:

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

Скрипты встроены в Гугл Хром по умолчанию. Однако, несмотря на то, что JS является обязательным для полноценной работы браузера, он может быть отключен по ряду причин: например, из-за сбоя в системе, принудительного закрытия браузера или активности вирусов.

В любом случае нерабочий ДжаваСкрипт приведёт к тому, что интерактивные элементы страниц окажутся недоступными, а на сервисах Яндекса будут периодически появляться соответствующие предупреждения.

Как правильно включить ДжаваСкрипт в Хроме

Рассмотрим подробные инструкции по активации Javascript в Chrome на всех устройствах.

На компьютере

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

Для всех посещаемых сайтов

Чтобы включить JS в Chrome:

  1. Открываем браузер на компьютере.
  2. Переходим в настройки веб-обозревателя. Для этого кликаем на «Ещё» в правом верхнем углу экрана и выбираем в появившемся меню соответствующую опцию. открываем настройки гугл хром
  3. В меню слева выбираем раздел «Конфиденциальность и безопасность»«Настройки сайта». настройки сайта гугл хром
  4. Листам страницу вниз до появления раздела «Контент». В нём выбираем пункт «JavaScript». контент яваскрипт google chrome
  5. Если функция активна, на странице будет отображаться статус «Разрешено (рекомендуется)». Если не активна – «Заблокировано». Для включения нужно перевести ползунок вправо. настройка гугл хром яваскрипт

Чтобы быстро перейти в настройки JS также можно использовать следующий адрес – chrome://settings/content/javascript . Вставляем его в адресную строку и нажимаем Enter. Дальше выполняем действия, описанные в пункте 5.

Изменения вступят в силу сразу после перезапуска браузера.

Для определенных веб-ресурсов

В Гугл Хроме JS можно включить или отключить как для всех веб-ресурсов, так и для определённых сайтов. Индивидуальная настройка скрипта может пригодиться, например, для осуществления родительского контроля методом ограничения доступного детям контента.

Рассмотрим, как локально активировать ДжаваСкрипт:

кнопка добавить адреса в гугл хром

  1. Открываем браузер и переходим в настройки ДжаваСкрипт вышеописанным способом.
  2. Рядом с графой «Разрешить» кликаем на кнопку «Добавить». Вводим в появившееся окно один или несколько URL-адресов, для которых нужно активировать скрипты.

Есть еще один более быстрый и простой способ активировать поддержку JS для конкретного сайта:

  1. Заходим на нужный веб-ресурс.
  2. Справа от адресной строки можно увидеть значок замочка. Нажимаем на него и в списке функций выбираем «Настройка сайтов». На экране появится страница с настройками браузера для конкретного веб-ресурса. настройка конкретного сайта гугл хром
  3. В появившемся списке ищем пункт «JavaScript» и напротив него ставим «Разрешать (по умолчанию)». javascript настройка сайта по умолчанию

На телефоне

Включение JS в мобильной версии браузера осуществляется по следующей инструкции:

  1. Открываем приложение Chrome для смартфонов.
  2. Кликаем на кнопку «Меню», расположенную в верхнем правом углу экрана.
  3. Выбираем раздел «Настройки»«Настройки сайтов»«JavaScript». включаем javascript в google chrome на android
  4. Активируем скрипт нажатием на ползунок, тот должен стать голубого цвета.
Читайте так же:
Как вводить массив в excel

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

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

Как деактивировать поддержку JS в Google Chrome

Чтобы деактивировать ДжаваСкрипт в Google Chrome:

  1. Опять открываем «Настройки»«Дополнительные»«Конфиденциальность и безопасность»«Настройки сайта».
  2. Входим в раздел JavaScript и переводим ползунок вправо. На экране отобразится статус «Заблокировано».

Также в меню настроек скрипта можно дезактивировать его для определённых веб-ресурсов. Для этого Javascript должен работать для всех ресурсов, а нужные URL-адресы нужно ввести в графу «Блокировать».

Что делать, если JavaScript не работает

справка - о гугл хром

Некорректная работа JS может быть связана с отсутствием обновлений для программы или сбоем в работе самого браузера. В первом случае рекомендуется провести поиск обновлений для браузера в разделе «Справка»«О браузере Google Chrome».

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

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

Заключение

Мы рассмотрели, как включить JavaScript в Google Chrome и зачем он вообще нужен в браузере. Ещё раз подчеркнём, что данный инструмент используется для проверки заполнения форм, создания анимированных или озвученных элементов сайтов, браузерных игр. В последнее время JS всё чаще стали называть опасным из-за угроз хакерских атак, поэтому топовые браузеры стараются переходить на HTML5. Возможно, в скором времени на новый язык программирования перейдёт и Хром.

Как включить JavaScript в моем браузере

Удивительно, насколько изменилось использование JavaScript — малоизвестный предмет за несколько лет стал важным инструментом веб-разработки. Сегодня JavaScript настолько незаменим в Интернете, что в большинстве интернет-браузеров применяется специальный модуль для его запуска.

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

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

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

Microsoft Edge

Internet Explorer

Mozilla Firefox

Google Chrome

Opera

Apple Safari

Инструкции для разработчиков

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

Мы оптимизировали страницу enablejavascript.io для пользователей с отключенным JavaScript таким образом, что:

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

Мы хотим, чтобы у ваших посетителей JavaScript был включен так же часто, как и у вас!

Google Chrome

  1. Включите компьютер и откройте браузер Google Chrome.
  2. В правом верхнем углу вкладки «Chrome» нажмите на значок меню.
  3. Выберите «Settings» в раскрывающемся списке.
  4. Теперь выберите «Privacy and settings» на левой боковой панели окна «Settings».
  5. В разделе «Privacy and Security» щекните пункт «Site settings».
  6. Выберите «JavaScript».
  7. Включите «Allowed (recommended)». Готово!

Internet Explorer

  1. Запустите Internet Explorer и откройте окно браузера.
  2. Нажмите «Tools» — обычно находится в самом верху строки меню. Затем выберите пункт «Internet Options» в отображаемом списке. Для быстрого перехода можно также воспользоваться клавишей «Alt».
  3. Щелкните вкладку «Security».
  4. Нажмите на кнопку «Custom Level».
  5. Прокрутите экран вниз до заголовка «Scripting» внизу страницы.
  6. Выберите пункт «Active Scripting» для включения JavaScript.
  7. Щелкните «OK».
  8. Перезапустите браузер.
Читайте так же:
Где в ворде включить нумерацию страниц

Microsoft Edge

  1. Откройте браузер Microsoft Edge.
  2. Щелкните значок троеточия в правом верхнем углу экрана, чтобы открыть вкладку «Menu».
  3. Выберите пункт «Settings» на вкладке «Menu».
  4. Затем щелкните «Site permissions» на панели «Settings» слева.
  5. Выберите «JavaScript».
  6. Включите «Allowed (recommended)».

Mozilla Firefox

  1. Запустите Mozilla Firefox и откройте окно браузера.
  2. Введите «about:config» в адресную строку и нажмите «Enter».
  3. Нажмите на кнопку «Accept the Risk and Continue» под предупреждающим сообщением, чтобы перейти на страницу окна поиска настроек.
  4. Введите «javascript.enabled» в окне поиска настроек.
  5. Найдите параметр «javascript.enabled» в результатах поиска и включите переключатель JavaScript.
  6. Перезапустите браузер.

Opera

  1. Запустите браузер Opera.
  2. Откройте меню «Easy Setup».
  3. Прокрутите меню «Easy Setup» вниз и выберите пункт «Go to browser settings».
  4. Затем прокрутите вниз до пункта «Site Settings» и щекните его.
  5. В разделе «Site Settings» найдите параметр, в котором отображается JavaScript, и выберите его.
  6. Включите переключатель «Allowed (recommended)» для включения JavaScript. Во включенном состоянии он становится синим.
  7. Поздравляем, вы включили JavaScript.

Apple Safari

  1. Перейдите в раздел «Safari» на своем устройстве.
  2. Выберите «Preferences».
  3. Щелкните значок безопасности.
  4. Установите флажок возле пункта «Enable JavaScript».
  5. Перезапустите браузер.

О проекте

Что такое JavaScript?

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

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

Замечаете, как на экране вашего устройства меняются или всплывают элементы без перезагрузки веб-страницы во время сеанса просмотра? Это работа JavaScript.

Сегодня JavaScript настолько распространен, что его используют многие современные веб-браузеры, включая Google Chrome, Safari, Mozilla Firefox, Opera, Internet Explorer, Microsoft Edge и пр. Популярные мобильные устройства (iPhone и на базе Android) также позволяют запускать браузеры и приложения на основе JavaScript по умолчанию.

История популярности JavaScript поможет вам понять, как он работает.

История JavaScript

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

Под влиянием уже существующих Scheme, Java и Self в 1995 г. появляется JavaScript — его создал Брендан Айк (Brendan Eich), на тот момент работающий с Netscape Communications. В 1990-х компания Netscape Communications была широко известна в Интернете благодаря браузеру Netscape Navigator, который пользователям нравился больше, чем Mosaic — первый пополярный веб-браузер.

Соучредителем Netscape Communications был Марк Андриссен (Marc Andreessen), член команды разработчиков Иллинойского университета, которая работала над проектом Mosaic в 1993 г. По мере того, как Интернет набирал популярность, технологические компании боролись за создание самого эффективного веб-браузера.

Корпорация Microsoft быстро среагировала и начала разработку Internet Explorer, намереваясь отобрать лидерство в Интернете у Netscape. Между браузерами Microsoft и Netscape началась ожесточенная война за превосходство на рынке акций браузеров.

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

В Netscape это поняли и представили легкий язык сценариев, позволяющий веб-разработчикам добавлять интерактивные функции на веб-страницы. Главным фактором было время, и в решающий момент на сцену вышел создатель JavaScript

В 1995 г. компания Netscape заключила договор с Бренданом Айком (Brendan Eich) о создании и внедрении динамического языка для выпуска своего браузера Netscape Navigator 2.0. Это был непростой проект с очень сжатыми сроками. Но Айк видел в нем возможность поработать над тем, чем он страстно увлекался, и согласился сотрудничать с Netscape. Так родилась идея легкого скриптового языка. Он был назван Mocha Eich, но позже был переименован в Live Script. Всего за десять дней функциональный прототип был разработан и готов к реализации в бета-браузере Netscape Navigator 2.0.

Читайте так же:
Заполнение пустых ячеек в excel предыдущим значением

Чтобы сохранить свое превосходство на рынке акций браузеров, Netscape согласилась сотрудничать с Sun Microsystems — разработчиками языка программирования под названием Java. В рамках этого союза Sun Microsystems обеспечила использование Netscape Navigator в качестве веб-платформы для предоставления сообществу доступа к Java.

В 1996 г., почти год спустя, Live Script в конечном итоге переименовали в JavaScript в маркетинговых целях для завоевания признания в сообществе Java. JavaScript был представлен как язык сценариев для небольших проектов на стороне клиента в браузере Netscape Navigator 2.0, а Java — как специализированный инструмент для разработки сложных веб-решений.

После этого Microsoft разработала свою реализацию JavaScript для создания пользовательской версии своего Internet Explorer 3. Ее назвали JScript во избежание правовых споров с компанией Sun Microsystems, которая владела торговой маркой Java и предоставляла ее Netscape по лицензии.

Чистые, универсальные и доступные для не разработчиков, JavaScript и JScript делали веб-страницы более интерактивными и динамичными и были очень популярны.

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

Эту проблему в значительной степени помогла решить стандартизация ECMA. Netscape и Sun Microsystems обратились к ассоциации ECMA International, которая должна была стандартизировать JavaScript. Стандартизация сыграла важную роль и привлекла внимание к этому новому языку.

Она расширила аудиторию пользователей JavaScript и позволила разработчикам принимать участие в эволюции языка сценариев. Кроме того, стандартизация позволяла решить вопрос контроля ситуаций использования кода в негативных целях. Чтобы не нарушать авторских прав Sun Java на торговую марку, комитет ECMA решил назвать стандартизированный язык ECMAScript.

Поначалу это вызвало еще большее недопонимание, но в конечном итоге ECMAScript стал спецификацией, а JavaScript был и является языком сценариев.

Изучите, как отладить JavaScript с помощью Chrome DevTools

Забудьте об отладке при помощи console.log навсегда! Изучите, как использовать точки останова для отладки кода в инструментах разработчика Chrome

Roman Ponomarev

Поиск и исправление ошибок может быть затруднительным. Вы можете поддаться соблазну бесконтрольно использовать console.log() , чтобы заставить ваш код работать правильно. С этим покончено!

Эта статья о правильном пути отладки! Вы узнаете, как использовать инструменты разработчика Chrome для настройки точек останова и исследования кода. Такой подход часто наиболее эффективный способ поиска и исправления ошибок в коде.

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

Шаг 1: Воспроизводим ошибку

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

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

  • Вот веб-страница, с которой мы будем работать в рамках этой статьи. Открывайте её в новой вкладке: ДЕМО.
  • В демо для Number 1 введите 5 .
  • Введите 1 для Number 2.
  • Нажмите Add Number 1 and Number 2.
  • Посмотрите на метку ниже инпутов и кнопки. Она говорит, что 5 + 1 = 51 .

Упс. Это неверный результат. Результат должен быть равен 6 . Это и есть ошибка, которую мы собираемся исправить.

Шаг 2: Приостанавливаем выполнение кода с помощью точки останова

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

  • Вернитесь к демо и откройте DevTools, нажав Command+Option+I (Mac) или Control+Shift+I (Windows, Linux).
  • Перейдите во вкладку Sources.
  • Нажмите Event Listener Breakpoints, чтобы развернуть меню. DevTools раскрывает список категорий событий, таких как Animation и Clipboard.
  • Разверните категорию событий Mouse.
  • Выберите click.
  • Вернувшись к демо, снова нажмите Add Number 1 and Number 2. DevTools приостановит работу и выделит строку кода в панели Sources:

Когда вы выбираете click, вы устанавливаете точку останова на основе всех событий click . Когда происходит клик по любой ноде и эта нода имеет обработчик события click , DevTools автоматически останавливает исполнение на первой строке кода обработчика click для этой ноды.

Читайте так же:
Задать размер ячейки в excel в см

Шаг 3: Исследуем код

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

  • На панели Sources в DevTools нажмите Step into next function call.

Эта кнопка позволяет вам осуществить выполнение функции onClick() по одной строке за раз. DevTools остановит выполнение и выделит следующую строку кода:

  • Теперь нажмите кнопку Step over next function call.

Это говорит DevTools выполнить функцию inputAreEmpty() , не заходя в неё. Обратите внимание, что DevTools пропускает несколько строк кода. Это происходит из-за того, что inputAreEmpty() расценивается как false , поэтому блок кода оператора if не выполняется.

Это основная идея исследования кода. Если вы посмотрите на код get-started.js , вы увидите, что ошибка, вероятно, находится где-то в функции updateLabel() . Вместо того, чтобы исследовать каждую строку кода, вы можете использовать другой тип точки останова, чтобы приостановить код ближе к месту ошибки.

Шаг 4: Устанавливаем другую точку останова

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

  • Посмотрите на последнюю строку кода в updateLabel() :

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

  • Нажмите кнопку Resume script execution:

Сценарий будет выполняться до тех пор, пока не встретит точку останова.

  • Посмотрите на уже выполненные строки кода в updateLabel() . DevTools выводит значения addend1 , addend2 и sum .

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

Шаг 5: Проверяем значения переменных

Другая распространенная причина ошибок: переменная или функция генерируют значения, отличные от ожидаемых. Чтобы увидеть, как значения меняются со временем, многие разработчики используют console.log() , но console.log() может утомлять и быть неэффективным по двум причинам. Во-первых, вам может потребоваться вручную отредактировать код с большим количеством вызовов console.log() . Во-вторых, вы можете не знать точно, какая переменная связана с ошибкой, поэтому вам может потребоваться залогировать множество переменных.

Watch Expressions — альтернатива от DevTools для console.log() . Используйте Watch Expressions для отслеживания значения переменных во времени. Как следует из названия, Watch Expressions не ограничиваются только переменными. Вы можете сохранить любое допустимое выражение JavaScript в Watch Expression. Попробуйте прямо сейчас:

  • На панели Sources DevTools нажмите Watch. Секция раскроется.
  • Нажмите Add Expression.
  • Введите typeof sum .
  • Нажмите Enter. DevTools покажет: typeof sum: "string" . Значение справа от двоеточия является результатом вашего Watch Expression.

Как и предполагалось, sum расценивается в качестве строки, а должна быть числом. Это причина нашей ошибки в демо.

Вторая альтернатива в DevTools для console.log() — это консоль. Используйте консоль для взаимодействия с произвольными операторами JavaScript. При отладке разработчики обычно используют консоль для перезаписи значений переменных. В вашем случае консоль может нам помочь проверить возможные пути исправления обнаруженной ошибки. Попробуйте прямо сейчас:

  • Если у вас не открыта консоль, откройте её нажатием Escape. Она откроется в нижней части окна DevTools.
  • В консоли введите parseInt(addend1) + parseInt(addend2) .
  • Нажмите Enter. DevTools вычислит команду и выведет 6 — ожидаемый результат.

Шаг 6: Исправляем

Мы определили потенциальное исправление ошибки. Осталось только проверить его, отредактировав код и перезапустив демо. Вам не нужно выходить из DevTools для применения исправления. Вы можете редактировать код JavaScript непосредственно в пользовательском интерфейсе DevTools. Попробуйте прямо сейчас:

  • В редакторе кода на панели Sources DevTools замените var sum = addend1 + addend2 на var sum = parseInt(addend1) + parseInt(addend2); . Это на одну строку выше места вашей остановки.
  • Нажмите Command+S (Mac) или Control+S (Windows, Linux) для сохранения изменений. Фон кода изменится на красный, сигнализируя, что сценарий был изменен в DevTools.
  • Нажмите Deactivate breakpoints.

Кнопка окрасится синим, указывая, что она активна: DevTools игнорирует любые точки останова.

  • Нажмите Resume script execution

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

голоса
Рейтинг статьи
Ссылка на основную публикацию
Adblock
detector