在浏览器中测试JavaScript代码方法简要介绍
在浏览器中测试JavaScript代码是前端开发中的一个重要技能。方法如下:
1. 浏览器控制台
最简单和直接的方法是使用浏览器的开发者工具中的控制台(Console)。
步骤:
在大多数浏览器中,按 F12 键打开开发者工具。
选择 “控制台(Console)” 标签。
直接在控制台中输入JavaScript代码并按Enter执行。
进入控制台以后,就可以在提示符后输入代码,然后按回车(Enter键),代码就会执行。如果按Shift + Enter键,就是代码换行,不会触发执行,可以输入多行语句,直至回车执行。
顺便提示:在浏览器控制台中,点击控制台右上角的 "清除控制台" 按钮,或者按下快捷键Ctrl+L,或者使用 console.clear() 方法的作用,是快速清空控制台,以便查看最新的日志信息或进行新的测试。清除控制台不会影响代码的执行或应用程序的状态,它只是清除了显示的输出。
例如测试下列语句:
console.log("Hello, World!");
let sum = 5 + 3;
console.log(sum);
参见下图:
2. 创建HTML文件
创建一个包含JavaScript代码的HTML文件,然后在浏览器中打开。
步骤:
使用文本编辑器(如记事本)创建一个新的HTML文件,例如 test.html。
在文件中添加JavaScript代码。
在浏览器中打开这个HTML文件。
实际发现,这个HTML文件可以简化,极简版只需要使用<script>标签
将代码放入<script>和</script>之间即可。如:
<script>
console.log("Hello, World!");let sum = 5 + 3;
console.log(sum);
</script>
将这些内容保存为 .html 文件(例如 test.html)。在浏览器中打开该文件,按 F12 键打开开发者工具,选择 “控制台(Console)” 标签页,可查看输出。
附录
浏览器的开发者工具使用介绍https://blog.csdn.net/cnds123/article/details/120822401
如何编辑运行HTML网页文件(HTML编辑工具使用介绍)https://blog.csdn.net/cnds123/article/details/113831256
浏览器控制台调试代码和JavaScript控制台方法介绍https://blog.csdn.net/cnds123/article/details/132332849
为什么浏览器控制台(Console)运行JavaScript代码有时会出现“undefined”?https://blog.csdn.net/cnds123/article/details/128014970