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

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

Чтобы открыть Developer Tool в Chrome, откройте любую веб-страницу, нажмите CTRL + SHIFT + I или используйте RightClick + Inspect.

Я использовал простую веб-страницу, состоящую из заголовка и элемента формы.

Вот код:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>login page</title>
<script src=”https://code.jquery.com/jquery-3.4.1.js" crossorigin=”anonymous”></script>
</head>
<body>
<br><br>
<center>
<h1>Hello Console</h1>
</center>
<main>
<center>
<form action=”” onsubmit=event.preventDefault()>
Email id:<br>
<input type=”text” name=”email” id=”lemail”> <br>
Password:<br>
<input type=”password” name=”passwd” id=”lpassword”>
<br />
<button type=”submit” id=”submit”>login</button>
</form>
<br>
<br>
<p id=”message”></p>
</center>
</main>
<script>
console.log(“hellow World”);
$(“#submit”).click(function () {
alert(“button clicked”);
})
</script>
</body>
</html>

В Chrome Dev Tool есть вкладка консоли, выберите ее.

Что представляет собой консоль и Что вы можете с ней делать?

Консоль похожа на терминал. С ней можно делать все, что угодно.

Что можно сделать с помощью консоли: -

  1. Вы можете отлаживать свои веб-страницы и просматривать сообщения журнала.
  2. В нем можно запустить скрипт.
  3. Изучите любой элемент веб-страницы и измените его пользовательский интерфейс или выполните на нем скрипт.

1. Просмотр сообщений журнала

Журналы: -

Журналы - это некоторая информация, доступная на веб-странице, например сетевые запросы, ошибки безопасности и предупреждения, а также сообщения, явно регистрируемые кодом JavaScript.

Console.log () внутри тега скрипта в html.

2. Запустить в нем скрипт

Вы можете запустить на нем код Javascript.

Запуск простого кода javascript в консоли.

z=”hellow world”;
console.log(z);
5+7+12

Предупреждающее сообщение на веб-странице через консоль.

alert(“404 Error);

3. Проверьте элемент веб-страницы.

Inspect Element - инструмент браузера, который позволяет просматривать и редактировать HTML и CSS веб-содержимого. Однако любые внесенные вами изменения будут отображаться только на вашем личном экране. Это означает, что вы не вносите никаких постоянных изменений на веб-сайт, а мы делаем это в настоящее время.

Как проверить элемент: -

Чтобы проверить элемент, нажмите кнопку «Проверить» или используйте CTRL + SHIFT + C.

Выберите элемент, который вы хотите проверить

Тег заголовка будет выбран.

После выбора элемента вы получите соответствующий тег html.

Изменение пользовательского интерфейса элемента с помощью скрипта:

Я использовал Jquery в консоли для изменения скрипта. Jquery - это JavaScript Framework, который упрощает доступ к веб-элементам.

$(“h1”).css(“color” , ”green”);

Чтобы изменить цвет тега h1.

$(“h1”).css(“font-size” , ”56px”);

Увеличить размер шрифта тега h1.

Запуск скрипта на элементах

$(“h1”).text();

Предоставляет текст, присутствующий внутри элемента

$(“#lemail”).val(“[email protected]”);

Установите значение элемента ввода электронной почты.

$(“#submit”).click();

Чтобы нажать кнопку отправки

Спасибо за чтение! Меня зовут Сумяджит. Посетите мой веб-сайт https://mywebpage.ashish454570.now.sh/.