相关文章推荐
玩手机的硬盘  ·  SQL Server 2016 ...·  1 年前    · 
礼貌的针织衫  ·  为什么 React ...·  1 年前    · 
深情的山寨机  ·  matlab曲面颜色_matlab ...·  1 年前    · 
百度
谷歌
狗狗

上面是这次学习主要的代码了,我们现在进入到javascript的调试状态去看看。

怎么进入javascript的调试状态呢,各浏览器的实现是不同的,像 火狐浏览器 有自己的firebug, chrome浏览器 本身就自带了调试。

这里讲一下IE浏览器的调试,毕竟当前浏览器市场IE还是占了很大的份额的。

想在IE浏览器中调试代码,可以像java代码一样,给代码打断点。

Javascript中断点的方式为 debugger 关键字 ,在需要调试的地方添加上 debugger ,再开启javascript的调试,就可以进入调试模式了。

接下来,我们演示一下javascript的具体调试。

首先,将上面的代码进行些许改造,在var hrefs = document.getElementsByName("clj"); 上面添加一行debugger;

<script>
	<!--getElementsByName-->
	debugger;
	var hrefs = document.getElementsByName("clj");
	for (var i=0; i < hrefs.length; i++) {
		var aHref = hrefs[i];
		if (aHref.href.search("http://www.baidu.com") > -1) {
			alert(aHref.href);
			break;
</script>

    然后打开该页面

    其次,按下F12,进入开发者模式

    开发者模式下,点击脚本页签,点击启动调试 按钮,进入调试模式

debugger; var hrefs = document.getElementsByName("clj"); for (var i=0; i < hrefs.length; i++) { debugger; var aHref = hrefs[i]; if (aHref.href.search("http://www.baidu.com") > -1) { alert(aHref.href); break; </script>

    开始调试,下图是刚启动调试的代码样子,即按F5之前的样子。

    按下F5之后,代码直接从14行调至17行,即下一个debugger断点的地方,如下图。

    F10 上面显示的是逐过程,但是本人在调试的时候,发现它的作用跟F11相同,都是一行行的走读代码,这里参考F11的作用就可以了。

    如果有朋友知道或了解到F10的其它作用,可以跟本人讲一下,定虚心学习。

Shift + F11 跳出

    Shift + F11 显示的是跳出调试,但是在操作过程中,发现它也只是跳到下一个debugger断点处,即跟F5的作用相似,这里参考F5即可。

    如果有朋友知道或了解到Shift + F11的其它作用,可以跟本人讲一下,定虚心学习。

断点行代码跟踪

    了解了调试的关键字,似乎还不够用啊。

    还不知道走到每一行代码,怎么继续看变量的具体内容。不急,接下来,我们就看断点到每一行的时候,我们能做哪些事情。

    接着F11 处的代码继续看吧

    选中变量aHref ,右键看到菜单

    这里太多的菜单项我们暂时不看了,我们关注添加监视(W) 菜单,因为它能让我们看到具体的变量内容,看到变量有哪些属性,有哪些方法。

    下图是点击添加监视后的视图。

    因为这一行代码还没走,变量还没有初始化,所以暂时变量值为undefined,类型为Undefined。

    继续按下F10,

    值变为了{…} ,类型变为了DispHTMLAnchorElement。

    {…} 表示该变量为对象类型或集合类型

    点击aHref 前面的小+ 号,展开aHref 变量,看看有哪些东东。

    最上面的是Events ,表示该对象上面有哪些可以绑定的事件。

    接下来是Methods ,表示该对象有哪些可以操作的方法。

    然后就是可供使用的属性信息了,在属性信息中,我们可以看到每个具体属性项的值,看到该项的值是否是我们想要的值,方便理解代码,调试代码。

    像accessKey 就是一个属性,对应值为空字符串。

    all 是个集合属性,值为{…},点击开后,就可以继续看all里面的每项具体属性值了。

怎么进入javascript的调试状态呢,各浏览器的实现是不同的,像火狐浏览器有自己的firebug,chrome浏览器本身就自带了调试。这里讲一下IE浏览器的调试,毕竟当前浏览器市场IE还是占了很大的份额的。想在IE浏览器中调试代码,可以像java代码一样,给代码打断点。Javascript中断点的方式为 debugger 关键字,在需要调试的地方添加上debugger,再开启javascript的调试,就可以进入调试模式了。debugger;var aHref = hrefs[i];if
什么是Firebug 从事了数年的Web开发工作,越来越觉得现在对WEB开发有了更高的要求。要写出漂亮的HTML代码;要编写精致的CSS样式表展示每个页面模块;要调试javascript 给页面增加一些更活泼的要素;要使用Ajax给用户带来更好的体验。一个优秀的WEB开发人员需要顾及更多层面,才能交出一份同样优秀的作业。为帮助广大正处于Web2.0洪流中的开发人员,在这里为大家介绍一款轻巧灵活的辅助开发工具。 Firebug是Firefox下的一款开发类插件,现属于Firefox 的 五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体,是开发JavaScript、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士军刀,从各个不同的角度剖析Web页面内部的细节层面,给Web开发者带来很大的便利。这是一款让 人爱不释手的插件,如果你以前没有接触过它,也许在阅读本文之后,会有一试的欲望。笔者在撰写此文的时候,正逢Firebug发布1.0正式版,这不能不 说是种巧合。 Firebug插件虽然功能强大,但是它已经和Firefox浏览器无缝地结合在一起,使用简单直观。如果你担心它会占用太多的系统资源,也可以方便地启用/关闭这个插件,甚至针对特定的站点开启这个插件。 在安装好插件之后,先用Firefox浏览器打开需要测试的页面,然后点击右下方的绿色按钮或使用快捷键F12唤出Firebug插件,它会将当前页面分成上下两个框架,如图1所示。 图1:Firebug插件展开图示 从图1中看到,Firebug有6个主要的Tab按钮,下文将主要介绍介绍这几方面的功能。 Console HTML CSS Script Dom Net 控制台 Html查看器 Css查看器 脚本条时期 Dom查看器 网络状况监视 Console 控制台 控制台能够显示当前页面中的javascript错误以及警告,并提示出错的文件和行号,方便调试,这些错误提示比起浏览器本身提供的错误提示更加 详细且具有参考价值。而且在调试Ajax应用的时候也是特别有用,你能够在控制台里看到每一个XMLHttpRequests请求post出去的参数、 URL,http头以及回馈的内容,原本似乎在幕后黑匣子里运作的程序被清清楚楚地展示在你面前。 象C shell或Python shell一样,你还能在控制台中查看变量内容,直接运行javascript语句,就算是大段的javascript程序也能够正确运行并拿到运行期的信息。
在实际开发中,不难发现的是,客户端JavaScript编程中的很多不兼容性都是针对IE的,这就导致需要按照一定的规则去为IE编写代码,而用另外一种方式去为其他浏览器编码。 1. 扩展兼容性 通用的方式是用if…else…语句来扩展兼容性,如 if(element.addEventListener){ //可使用该W3C方法的浏览器的相关处理 else if (element.attachEv...
注意此方法只适用于IE浏览器,因为IE提供了 ActiveX 控件,可以在 “属性”-“安全”-“自定义级别” 中启用 ActiveX: 新建 web.html , 代码如下: <script language="...
现在javascript是大行其道,在前端是无处不在,到处都有其身影,在这里主要是介绍在IE浏览器上的调试。1、在记事本里输入一段程序,这里为了简单,就在浏览器上显不一个文本框和一个按钮,做一个加法运算。代码如图: 2、打开浏览器输入文件地址,出现如下所示的界面。3、按F12键,出现javascript调试窗口。在需要调试的地方前面有数字行的地方左击命中断点。4、再点击“启动调试”,回到浏览器
前段时间买了新电脑,安装的是win10系统,开发程序时需要经常使用ie浏览器(项目是基于IE控件开发的,所以必须用IE)进行调试,F12打开调试器之后,发现找不到要调试的JS,与以前使用的IE7不同,网上找了好多解决方案都不行,后来无意中想起直接在JS中插入debugger进行调试的方法,几番尝试之后终于解决。 以需要调试的A页面为例,A.html是页面,A.js是A.html所引用的...
不同版本的 Internet Explorer 浏览器支持不同的 JavaScript 元素集。标准模式(有  指令时 Internet Explorer 所有当前版本中使用的模式)支持的一组元素与突发模式(没有  指令时使用的模式)不同。 有关版本控制的更多信息,请参见Defining Document Compatibility(定义文档兼容性)。   下表显示支持特定语言元素的 I
前端开发等需求明确说明需要兼容IE时,我们才发现IE真的很恶心,不管是html5与css3的支持情况还是js需要做的兼容写法,都是令我们作呕的。但是身为开发人员,需求下来了又不能不管。只能往前冲,所以笔者今天就写了这边笔者自己的小总结博客。希望能在你开发项目兼容IE时有所帮助! // 获取浏览器可视窗口的宽度与高度: var clientWidth = document.documentEle...
1. 页面链接错误:请检查链接是否正确,确保没有拼写错误或链接地址错误。 2. 缓存问题:有时候浏览器会缓存页面,导致跳转无效。可以尝试清除浏览器缓存,或者使用无痕模式打开页面。 3. JavaScript问题:如果页面链接是通过 JavaScript 实现的,则可能存在 JavaScript 代码错误导致跳转无效。可以检查 JavaScript 代码是否正确。 4. 服务器问题:如果服务器出现问题,则可能导致页面无法正常加载或跳转。可以尝试刷新页面,或者等待服务器恢复正常。 5. 浏览器问题:有时候浏览器本身存在问题,导致页面跳转无效。可以尝试使用其他浏览器或者更新浏览器版本。 Consider defining a bean of type ‘org.springframework.http.codec.ServerCodecConfigurer‘ in your conf Kangrant: