how2j.cn


工具版本兼容问题
Javascript的运行和Java不一样,没有一个像ecipse这样的集成开发环境(IDE)。

尤其在刚开始学习的时候,更加推荐直接使用记事本来编写,而不是依赖于其他的有提示功能的编辑器(Sublime),这样更加利于暴露自己编写的javascript代码的问题,并纠正和学习。

但是依然存在一个调试的问题,本知识点只是讲解各种调试的办法。

步骤 1 : alert进行调试   
步骤 2 : 使用专业的调试工具   
步骤 3 : 下载firefox   
步骤 4 : 使用firefox 的调试功能   
步骤 5 : console.log()   

步骤 1 :

alert进行调试

使用alert(1)进行调试,这是最开始的时候非常常用的一种手法来进行javascript代码调试,即使今天,也是比较有效的一种方式。
使用alert的思路:

alert(1)

会弹出一个对话框,里面的内容是1。换句话说,如果弹出了1,这个位置以上的代码,都是可以运行的。
你不停的把alert(1)向下移动,当移动到某一行之后,就不再弹出,那么就证明那一行运行有问题。 这样就把问题的范围缩小了,就很容易通过肉眼观察法来定位真正问题所在。
运行效果
<script> x = 10; //alert(1); document.write("没有用var声明的变量x的值:"+x); //alert(2); </script>
<script>
  x = 10;
  //alert(1);
  document.write("没有用var声明的变量x的值:"+x);
  //alert(2);
</script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 2 :

使用专业的调试工具

不同的浏览器有不同的调试办法,本文以firefox为例来讲解如何调试
步骤 3 :

下载firefox

下载firefox 49.0,直接解压就可以使用了。
步骤 4 :

使用firefox 的调试功能

这里准备了一段故意写错的javascript代码。
点击快捷键F12,就会出现console页面。

console是控制台的意思,用于输出一些错误和调试信息。

注意: 虽然这段javascript代码有错误,但是第一次F12是看不到错误的,因为错误已经发生了,才打开了F12。 所以打开了F12之后,使用快捷键F5刷新一下当前页面,就可以看到控制台报出了错误的原因
document.write1 is not a function
这样定位问题就非常方便了。
运行效果
使用firefox 的调试功能
这是一段故意写错的write方法的javascript代码 <script> x = 10; document.write1("这是一段故意写错的write方法的javascript代码"); </script>
这是一段故意写错的write方法的javascript代码
<script>
  x = 10;
  document.write1("这是一段故意写错的write方法的javascript代码");
</script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 5 :

console.log()

类似于 alert进行调试, firebug有一个日志输出工具console.log().
不同于alert的缺点( 弹出屏幕,阻挡所有其他操作),console.log() 只会把信息输出在console里,而不会影响用户的使用。 用户甚至意识不到console.log()的存在。
运行效果
<script> x = 10; console.log("x="+x); document.write("没有用var声明的变量x的值:"+x); console.log("end"); </script>
<script>
  x = 10;
  console.log("x="+x);
  document.write("没有用var声明的变量x的值:"+x);
  console.log("end");
</script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2017-06-17 console.log()没有显示值
slience
用firebug为什么看不到console.log的值




1 个答案

how2j 答案时间:2017-06-19
firebug已经停止维护,按照它的说法是,firefox的F12功能已经很强大,并且超过了firebug,所以推荐使用firefox本身的F12. 我以前也碰到了firebug 里console.log不起作用,所以转成了firefox自带的。 当前教程的截图也是firefox自带的了。




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2017-05-09 有没有safari浏览器下的调试方式,能简单介绍一下,或者指个方向
yinyin
有没有safari浏览器下的调试方式,能简单介绍一下,或者指个方向,谢谢老师啦




1 个答案

hhhh 答案时间:2017-07-17
用chrome吧




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2017-03-02 老师,请问您说的“通过ctrl+alt+上下滚轮就可以改变firebug的字体大小 ”,我试了下,没反应,不知道怎么回事?
2016-11-02 chrome调试工具很好用
2016-10-18 关于firebug调试js还不怎么会?
2016-07-26 错字




提问之前请登陆
关于 前端基础-JavaScript-调试办法 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 620943819
站长会在每个工作日早上尽量回答提问(如果有漏掉没有回答的,请进群提醒一下)
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
站长是玻璃心,提问的时候请语气温柔些 kiss~
截止2017-5-19日累计提问 1638个,站长回答了 1546个
截止2017-8-15日累计提问 2788个,站长回答了 2544个

上传截图