首页 存档 技术 查看内容

在不同浏览器中调试javaScript代码(一)

2018-3-30 13:00 |来自: 互联网 300 0

摘要: 点击上方“蓝字”关注本公众号在不同浏览器中调试javaScript代码(一)○ 我们都知道在前端开发中存在的一个最大的问题就是浏览器兼容性问题,同样在不同的浏览器中,调试工具也有所不同,这里我们就主要介绍一些 ...

点击上方“蓝字”关注本公众号

在不同浏览器中调试javaScript代码(一)

我们都知道在前端开发中存在的一个最大的问题就是浏览器兼容性问题,同样在不同的浏览器中,调试工具也有所不同,这里我们就主要介绍一些主流浏览器:Firefox、Chrome、Opera,、Safari 和IE.

一、Firefox浏览器调试工具Firebug

Firebug是火狐浏览器中的调试工具,使用Firebug之前,需要在Firefox浏览器安装Firebug应用。

(1)安装Firebug应用

使用快捷键commond shift A(mac os系统)或者ctr shift A(window系统)。,找到Firefox浏览器安装插件的页面,在搜索栏输入firebug


这样我们就安装了火狐浏览器的调试工具firebug。

(2)使用调试工具firebug

然后就可以按F12开启调试。效果如图:

在这里就可以进行代码的调试。


二、浏览器自带调试工具

Opera, Safari 和Chrome,IE厂家都提供自家的web调试工具,这里我们以Chrome浏览器为例,讲解Chrome浏览器自带的调试工具。

打开Chrome浏览器。,打开调试工具。打开调试工具的办法如下图所示,当然了,也可以按下快捷键F12来打开调试工具。


打开开发者工具,页面显示如下图所示:


选中Console,界面如下图


在Console的空白处就可以输入javaScript调试代码,举个例子老说:这里我们输入alert(123);。点击enter键,调试代码就会执行。


就会弹出一个对话框。


根据项目的需求就可以在这里输入对应调试代码。


三、断点调试

在开发过程中,断点调试是必不可少的。设置断点后,当代码执行到该断点,执行就会中断。可以在调试面板的右上角执行播放、下一步、进入、跳出。设置断点有以下两种中方式:

1.单击Sources选项,在想要设置的行单击一下即可。再次点击就表示取消该断点。如下图

这样我们就实现对第70行代码设置断点。

2.通过在代码中添加debugger来设置断点,代码如下

alert(“断点调试”);

debugger;

在这里设置的debugger这句代码,就表示在alert(“断点调试”);代码后设置断点。

声明:文章版权归原作者所有 部分文章转自互联网 如有侵权请联系 [邮箱地址] 删除

路过

雷人

握手

鲜花

鸡蛋

相关分类

返回顶部