JavaScript怎么调试?怎么调试的方法分享!

2021-07-03 14:37:05 浏览数 (3)

想必很多小伙伴都有过这样的经历,在前端开发的过程中我们会遇到许多的调试之类的问题,那么今天我们就来说说有关于“JavaScript怎么调试?”这个问题。下面是小编整的相关内容,希望对大家的学习和来了解有所帮助!

对于这个问题的话我们在没有调试器的情况下写JavaScript是有难度的,这样子我们在书写代码的时候会很多的问题,语法错误、逻辑错误这些都是比较难以诊断的。一般我们在书写代码有问题的时候不会发生任何事情也不会给我们错误的消息提示。


1、console.log()方法:

我们来看看下面这个代码:

<html>
<body>

<h1>我的第一张网页</h1>

<p>使用F12在浏览器(Chrome、IE、Firefox)中激活调试,然后在调试器菜单中选择“控制台”。</p>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>

对于这个方法我们还是需要浏览器支持的,那么我们就可以使用这个方法来查看我们页面中JavaScript的值,一般都可以在浏览器中点击F12进行打开我们的控制器进行调试。


2、设置断点

我们可以通过在调试窗口中的JavaScript代码中设置断点,而且在每个断点中,JavaScript将停止执行可以方便我们查询JavaScript的值,而且在查询之后还可以恢复我们代码的执行。


3、debugger关键词

在使用这个方法的时候是会停止JavaScript的执行,还会进行调用我们的调试函数,这就和我们的调试器中的设置断点的功能时一样的了,我们可以看看下面这个代码:

<html>
<head>
</head>

<body>

<p id="demo"></p>

<p>打开调试器后,下面的代码应该在执行第三行之前停止执行。</p>

<script>
var x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

当我们在进行使用这个方法的时候,上面的代码中会在执行第三行之前停止运行。


4、主流浏览器的调试工具

Chrome

打开浏览器 ,从菜单中选择工具 ,从工具中选择开发者工具,最后,选择控制台。

 Firefox Firebug 

打开浏览器,前往网页:http://www.getfirebug.com ,根据如下指令:如何安装 Firebug。

Internet Explorer

打开浏览器 ,从菜单选择工具,从工具选择开发者工具 最后,选择控制台。

 Opera 

打开浏览器,请前往网页:http://dev.opera.com,根据如下指令:如何安装 Firebug Lite。

 Safari Develop Menu

点击 Safari 菜单,偏好设置,高级,之后我们在通过选中“在菜单栏中启用开发菜单”,当菜单中出现新选项“开发”时,选择“显示错误控制台”。 


总结:

以上就是有关于“JavaScript怎么调试?”的问题,如果你有什么更好的方法也可以和大家一同分享,更多有关于JavaScript这方面的相关内容我们都可以在W3Cschool中进行学习和了解。当然对于我们说到的有关于JavaScript调试的话我们还是要考虑实际的运用情况来决定的。



0 人点赞