chrome如何调试html,如何用firefox或chrome浏览器调试js和jquery程序

调试js和jquery程序时，我们可以通过网页执行其代码看输出到网页的结果是否与预期一致，不过在调试过程中如何能更快地追踪代码的执行过程和错误？这就是本文的重点，如何用firefox或chrome浏览器调试js和jquery程序。

firefox和chrome浏览器都有一个开发者工具，里面包含各种网页开发上的功能，如网络监视，控制台，样式编辑器等等，非常强大。而我们今天要介绍的，用来调试js和jquery程序的，正是“控制台(console)”这一工具。

如何打开开发者工具进入“控制台(console)”？

打开一张网页后，按F12键，即可打开开发者工具并进入“控制台(console)”。

使用“控制台(console)”调试js和jquery程序

我们首先看一段代码：

//遍历一维数组var arr1 = ["aaa", "bbb", "ccc"];

$.each(arr1, function(i, val) {

//在控制台输出执行日志

console.log(i + ". " + val);

});

关键代码console.log()是Jquery调试代码，即是要在“控制台(console)”里输出Jquery代码执行过程记录。

上述代码，是遍历一个一维数组，在“控制台(console)”输出的结果如下图所示：

“控制台(console)”输出的结果

完整HTML代码如下：

点击我看输出结果

$(document).ready(function(){

$("#btnClick").on('click',function(e){

//遍历一维数组

var arr1 = ["aaa", "bbb", "ccc"];

$.each(arr1, function(i, val) {

//在控制台输出执行日志

console.log(i + ". " + val);

});

如何使用上述代码调试程序？

首先用Chrome或Firefox浏览器打开上述代码的网页文件，点击打开网页，然后按F12打开“控制台(console)”。

按F12打开“控制台(console)”

然后点击按钮，就看到下面输出执行日志了。

控制台(console)输出执行日志

Firefox与Chrome浏览器操作过程一样。

Firefox控制台(console)输出执行日志

结论：学会了Firefox和Chrome浏览器调试JS和Jquery程序，将大大提高前端程序的开发效率，用其追踪JS或Jquery的执行过程，查起错来将更加容易。

chrome如何调试html,如何用firefox或chrome浏览器调试js和jquery程序相关推荐

火狐浏览器中打开java_Ubuntu下通过Firefox Opera Chromium浏览器直接执行java应用程序（打开java jnlp文件）实现在服务器远程虚拟控制台完成远程管理的方法...
远程虚拟控制台依赖于java运行环境(jre),在通过浏览器打开链接前,系统必须安装jre环境,远程管理控制台其实就是一个java程序,打开相应的网站会下载一个jnlp(java网络加载协议)的文件, ...
FireFox火狐浏览器调试响应式页面
对于不同分辨率页面可能出现不同的样式,可以用CSS3的媒体查询来针对不同浏览器设置不同样式来解决问题,那么如何在浏览器中进行不同分辨率的调试,现在整理下在火狐浏览器调试的方法. 1.打开FireFox ...
我为什么选择Firefox作为主力浏览器
---------------------------------------------------------------------------------------------知乎搬运工-- ...
Chrome（谷歌）浏览器调试教程珍藏版
前言鸣谢殷老师,非常优秀的学习资料,分享给大家,希望对大家有帮助! 引言在web开发过程中,我们在写JavaScript脚本时难免会遇到各种bug,这时,我们就需要去调试我们的JavaScript ...
Chrome浏览器调试教程
==>(微信公众号:IT知更鸟)欢迎关注<^>@<^> Chrome浏览器及调试教程引言在web开发过程中,我们在写JavaScript脚本时难免会遇到各种bug,这 ...
IE、Firefox、Chrome比较
IE.Firefox.Chrome比较 IE的兼容性,Firefox的插件,Chrome的速度. Firefox适合编辑,Chrome适合浏览,只有IE才能完美的支持网银之类的一些操作. 个人观点:如 ...
如何检测Safari，Chrome，IE，Firefox和Opera浏览器？
我有5个FF,Chrome,IE,Opera和Safari插件/扩展程序. 如何识别用户浏览器并重定向(一旦单击安装按钮)下载相应的插件? #1楼简单的一行JavaScript代码将为您提供浏览器的 ...
Vue中进行断点调试的两种方式(使用外部浏览器和VsCode的 Debug for Chrome插件)
场景在使用IDEA等进行后台开发时可以直接在想要进行断点调试的地方双击添加一个断点,然后逐步或者逐过程进行调试. 但是在Vue中如果想要进行调试时,如果是在js中调试的话,可以直接添加一个debug ...
[Python爬虫] Selenium自动访问Firefox和Chrome并实现搜索截图
前两篇文章介绍了安装,此篇文章算是一个简单的进阶应用吧!它是在Windows下通过Selenium+Python实现自动访问Firefox和Chrome并实现搜索截图的功能. [Pyt ...
JavaScript中的window.close在FireFox和Chrome上不能正常动作的解决方法
原文:JavaScript中的window.close在FireFox和Chrome上不能正常动作的解决方法 JS中关闭窗口的方法window.close()在IE上能够正常动作,而在FireFox和 ...

chrome如何调试html,如何用firefox或chrome浏览器调试js和jquery程序

chrome如何调试html,如何用firefox或chrome浏览器调试js和jquery程序相关推荐

最新文章

热门文章