您的位置:

js中代码调试(js中代码调试正常,直接运行出问题)

js中代码调试(js中代码调试正常,直接运行出问题)

更新:

本文目录一览:

怎么利用浏览器的调试工具来调试JS代码

1、在工具-Internet选项-高级,去掉“禁用脚步调试(Internet Explorer)”项的勾选。 2、去掉“显示友好http错误信息”项的勾选。最后点击应用,确定按钮。 3、预览表单,当要执行的js程序出现错误时,浏览器会给出提示。 4、在给出的错误提示窗口中,选择“是(Y)”按钮,进入IE浏览器自带的开发人员工具脚本调试界面, 5、根据JS调试信息可以知道,当前JS报错是由于没有找到指定对象“dat”而导致的。我们需要在表单设计器中,修改JS程序并保存。因演示效果的需要,在本例中是没有设置id值为dat的单行输入框控件的,本例中第二个单行输入框控件的id值是data2。修改后的JS代码, 6、将其改成值data2后,再进行测试不会出现JS报错信息,程序得以正常执行

怎么在浏览器中调试JS代码

在浏览器中调试JS代码的方法

Chrome浏览器

按F12或是"设置"--》“工具”--》“开发者工具”,即可打开chrome的调试工具。

关于这个工具的用法,请参考“怎么使用chrome调试工具”。这里主要讲怎么使用source这个选项来调试JS代码。下图source选项的窗口。

0怎么使用chrome调试工具

下图中1为source选项卡,2是在小窗口中选中source选项,3是当前页面的原代码,这个需要自己确定,一般会是index或是比较具体的jsp的名称。双击3中的页面,右边的窗口中会出现页面的原代码,如下图4. 点击5,会格式化代码,是代码有合理换行,比较清晰。

下面就是具体的调试了。

在下图1中,先通过元素定位找到一个按钮,查看原代码,找到它点击后的JS方法,然后在source窗口查询,如图2中的1,定位到该方法,在方法的第一行代码的左边,单击,窗口上会出现3这样的箭头,表示断点设置在这里。4是一些控制,包括继续执行,暂停执行,跳入,跳出等。5显示的是当前所有的断点的信息。

在页面上点击按钮,页面会进入下图所示的状态,表示进入JS方法中的断点了。代码执行会停在断点处。1上面的继续按钮,可以是JS方法继续执行,也可以使用3上面的继续按钮。代码停在2中的代码行,这时可以将鼠标悬停在变量上来查看变量值,也可以在console中打印输出。点击3上的执行下一行可以执行下一行,也可以跳入某个方法或是跳出。点击继续,代码会跳到下一个断点或是完成调试。

FireFox浏览器。

按F12或是“设置”--》"开发者"--》“Web控制台”

FireFox和chrome的调试方法是一样的,只是浏览器的调试窗口和按钮位置有少许区别,请参照chrome浏览器的调试方法就可以。下面是FireFox的调试窗口截图。

js 压缩后的代码如何调试?

我想你问的是不是类似UglifyJS之类的混淆过的JS代码?这种压缩通常会把变量、函数名之类的改成非常短的名称,因此这种压缩过的代码就难以识别了。

对于这种代码,推荐的思路是先看浏览器中是否有报错,然后根据错误来判断自己原始代码里可能出错的位置;如果没有报错,那也是断定大概的位置,然后Chrome里打开开发者工具里的Sources,打开自己的代码,用这个地方可以对代码进行重新排版:

当然,如果是uglify过的代码还是很难看,只能根据自己实际代码里的一些常量内容作为关键词在浏览器的代码里面搜自己可能的位置,然后加断点推测去调试。

上面的办法,都是在你对压缩JS这个过程没有控制的情况下,如果是你自己压缩JS代码,可以在压缩的时候同时生成sourcemap文件,一般是xxx.js.map文件。如果连同这个文件一起部署,那么在开发者工具中打开的时候,也可以看到最原始的代码了。这是最推荐的办法,调试起来也是最轻松的。

dreamweaver里如何调试javascript代码

目前,常用的浏览器IE、Chrome、Firefox都有相应的脚本调试功能。我们先来看IE的:

1、在F12开发人员工具中进行调试

打开IE浏览器,按下F12键,就会打开开发人员工具,这是IE内置的开发人员开发工具,方便开发人员对HTML、CSS、Javascript等网页资源进行跟踪调试使用的。

如果你打开的时候没有固定在网页底部,可以点击右上角菜单栏中的按钮来完成。

我们看到在这个工具窗口里面有几个标签页,分别是:HTML、CSS、控制台、脚本、探查器和网络,点开每一个标签,可以执行相应的任务。

在HTML标签窗口中,工具栏中的按钮所执行的操作如下图:

CSS标签是用来查看样式的;控制台显示网页中JS的各种输出信息,包括错误信息、用户日志等;打开脚本标签页,这里面才是我们想要的内容。

我在图中用黄色矩形选中连个控件,左侧的下拉列表用来选择文件,右侧的按钮用来启动调试。当点击启动调试后,调试程序会将窗口最大化,我们在选中的文件中找到需要调试的位置,点击左侧边栏添加断点即可进行调试。

当有程序运行到我们的断点处时,就可以进行调试了:

在这里,我们可以使用快捷键进行操作,常用的快捷键如下:

F9:添加/移除 断点

F10:逐过程,即跳过该语句中的方法、表达式等

F11:逐语句调试,即单步调试,会跳入方法、表达式,进行逐语句的跟踪调试

在执行过程中,如果我们要执行即时的代码,我们就需要在右侧的窗格中输入代码,按回车即可:

如果要执行多行代码,点击运行按钮右侧的双箭头,就会打开多行模式。我就不再截图片了。

这种直接在浏览器中调试的方法同样适用于Google浏览器Chrome和FireFox FireDebug,只不过在细枝末叶上面有些不同罢了,主体的功能都是一样的。

按F12键进入开发者工具,可以查看源代码、样式和js:

点击Scripts按钮,可以打开这个调试窗口,里面包含了网页中脚本文件源码,点击左侧的按钮可以打开选择文件的侧窗口。

2、使用debugger关键字进行调试

这种方法很简单,我们只需要在进行调试的地方加入debugger关键字,然后当浏览器运行到这个关键字的时候,就会中断:

设置以后就可以使用debugger关键字进行调试了;进过这样的设置,我们还可以捕获到意外的错误,进行跟踪调试。

js中代码调试(js中代码调试正常,直接运行出问题)

本文目录一览: 1、怎么利用浏览器的调试工具来调试JS代码 2、怎么在浏览器中调试JS代码 3、js 压缩后的代码如何调试? 4、dreamweaver里如何调试javascript代码 怎么利用浏览

2023-12-08
chrome调试混淆js(Chrome调试怎么直接修改代码)

本文目录一览: 1、关于Chrome浏览器调试JS问题 2、chrome浏览器怎么调试js 3、如何使用chrome+nodpad++调试javascript 4、如何在google chrome浏览

2023-12-08
js代码直接运行(js文件直接运行)

本文目录一览: 1、Ubuntu系统下怎么让js文件直接执行 2、JS脚本怎么运行? 3、js文件怎么运行 4、如何让网页打开就运行JS代码,不用onclick 5、如何让浏览器运行javascrip

2023-12-08
js代码中script,js代码中的问号是什么意思

本文目录一览: 1、javascript中script的SRC属性 2、JS代码里加载script代码,并隐藏其内容怎么弄呢? 3、使用javascript必须使script标签吗 javascrip

2023-12-08
js调试断点监控(js断点调试代码)

本文目录一览: 1、怎么在f12 js断点失效 2、谷歌浏览器调试js 断点怎么使用 3、javascript中的断点调试是什么意思? 4、怎样从Firebug设断点调试JS代码 5、js怎么断点调试

2023-12-08
chromjs调试,chrome调试js代码

2022-11-23
java调用js代码,java调用js代码 实例

本文目录一览: 1、如何在java中调用js方法 2、如何通过java代码调用js 3、java中怎么调用js代码 4、如何在java调用js 5、请问怎么写java调用node环境运行js代码? 如

2023-12-08
安卓调试apk的js,apk运行

本文目录一览: 1、在android中怎样调用本地js文件里的方法并得到返回值 2、Android调用js的问题 3、android 中怎么执行js脚本 4、android里如何调用Js里的函数 5、

2023-12-08
js一步一步调试,js如何调试代码

本文目录一览: 1、浏览器中怎么一步一步调试js代码 逐条代码执行按什么键 2、如何使用firefox进行网页js调试 3、有哪些 JS 调试技巧 4、js之断点调试步骤 5、如何调试JS? 6、谷歌

2023-12-08
js代码调试教程(js代码调试教程图片)

本文目录一览: 1、如何使用firefox进行网页js调试 2、js 压缩后的代码如何调试? 3、dreamweaver里如何调试javascript代码 如何使用firefox进行网页js调试 1、

2023-12-08
js代码调试技巧(JS在线调试)

本文目录一览: 1、如何使用firefox进行网页js调试 2、js 压缩后的代码如何调试? 3、如何调试html网页中的js代码 4、dreamweaver里如何调试javascript代码 5、火

2023-12-08
htmljs编程笔记(html代码笔记)

本文目录一览: 1、html代码和JS代码有什么区别 2、如何在html中调用js函数 3、JavaScript学习笔记之数组基本操作示例 4、HTML5初学者笔记 5、《web前端笔记7》js字符—

2023-12-08
js常考代码,js常见笔试题

2022-11-23
js函数中运行php代码(php+js)

2022-11-11
js运行代码教程,运行js脚本

2022-11-23
visual2008调试js(vs2013调试)

本文目录一览: 1、VS2008里面怎么调用JS的文件夹 2、能否在visual studio 2008的.js文件里写jquery时 产生自动代码提示? 3、怎样使用VS来调试JS文件 4、问一下怎

2023-12-08
js代码整洁随笔,js代码整理

本文目录一览: 1、如何在页面让JavaScript代码原样显示,用标签不起用,js照常运行。请看问题补充 2、怎么让JS文件代码对齐 3、怎么样格式化javascript,怎么样格式化js 4、为什

2023-12-08
ie6调试js是什么,ie 调试js

本文目录一览: 1、IE6下大家都用什么JS框架 2、ietester 下如何调试js 3、IE6 开发人员工具 怎么打开 快捷键是多少? IE6下大家都用什么JS框架 js的作用主要是使用了Micr

2023-12-08
网站js调用代码(网站js调用代码是什么)

本文目录一览: 1、调用JS代码怎么写 2、如何在html中调用js代码 3、求助:HTML点击按钮调用JS文件或者直接调用JS代码? 调用JS代码怎么写 1、建立JS文件。把原本JS代码除SCRIP

2023-12-08
js代码放置在php中调用,js调用php自定义函数

2023-01-08