how2j.cn


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

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

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


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

步骤 1 :

alert进行调试

edit
使用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 :

使用专业的调试工具

edit
不同的浏览器有不同的调试办法,本文以firefox为例来讲解如何调试
下载firefox 49.0,直接解压就可以使用了。
步骤 4 :

使用firefox 的调试功能

edit
这里准备了一段故意写错的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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
类似于 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公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2020-05-24 在mac里面调试
mengli

How to open the console tool? Answer: You can open the Firefox Developer Tools from the menu by selecting Tools > Web Developer > Toggle Tools or use the keyboard shortcut Ctrl + Shift + I or F12 on Windows and Linux, or Cmd + Opt + I on macOS. Source: https://developer.mozilla.org/en-US/docs/Tools




4 个答案

java基础学习
答案时间:2020-09-30
调试是不是需要换浏览器

123456az
答案时间:2020-08-18
可以用谷歌 F12进行调试

danwich
答案时间:2020-07-24
Cmd + Opt + I on macOS.

a53559180
答案时间:2020-06-26
外国人?



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




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浏览器下的调试方式,能简单介绍一下,或者指个方向
2017-03-02 老师,请问您说的“通过ctrl+alt+上下滚轮就可以改变firebug的字体大小 ”,我试了下,没反应,不知道怎么回事?
2016-11-02 chrome调试工具很好用


提问太多,页面渲染太慢,为了加快渲染速度,本页最多只显示几条提问。还有 1 条以前的提问,请 点击查看

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-JavaScript-调试办法 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 635924385
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图