打开IE浏览器,按下F12键,就会打开开发人员工具,这是IE内置的开发人员开发工具,方便开发人员对HTML、CSS、Javascript等网页资源进行跟踪调试使用的。
如果你打开的时候没有固定在网页底部,可以点击右上角菜单栏中的按钮来完成。
我们看到在这个工具窗口里面有几个标签页,分别是:HTML、CSS、控制台、脚本、探查器和网络,点开每一个标签,可以执行相应的任务。
在HTML标签窗口中,工具栏中的按钮所执行的操作如下图:
CSS标签是用来查看样式的;控制台显示网页中JS的各种输出信息,包括错误信息、用户日志等;打开脚本标签页,这里面才是我们想要的内容。
我在图中用黄色矩形选中连个控件,左侧的下拉列表用来选择文件,右侧的按钮用来启动调试。当点击启动调试后,调试程序会将窗口最大化,我们在选中的文件中找到需要调试的位置,点击左侧边栏添加断点即可进行调试。
当有程序运行到我们的断点处时,就可以进行调试了:
在这里,我们可以使用快捷键进行操作,常用的快捷键如下:
F9:添加/移除 断点
F10:逐过程,即跳过该语句中的方法、表达式等
F11:逐语句调试,即单步调试,会跳入方法、表达式,进行逐语句的跟踪调试
在执行过程中,如果我们要执行即时的代码,我们就需要在右侧的窗格中输入代码,按回车即可:
如果要执行多行代码,点击运行按钮右侧的双箭头,就会打开多行模式。我就不再截图片了。
这种直接在浏览器中调试的方法同样适用于Google浏览器Chrome和FireFox FireDebug,只不过在细枝末叶上面有些不同罢了,主体的功能都是一样的。
按F12键进入开发者工具,可以查看源代码、样式和js:
点击Scripts按钮,可以打开这个调试窗口,里面包含了网页中脚本文件源码,点击左侧的按钮可以打开选择文件的侧窗口。
可以直接在页面上点击右键,然后选择审查元素或者在Chrome的工具中找到或者你直接记住这个快捷方式: Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台),或者直接按F12。
1.下载“火狐浏览器”。如果电脑上没有安装“火狐浏览器”,可以在百度中搜索并下载,如图:
2.使用火狐浏览器打开需要调试页面(也可以在开发工具设置火狐浏览器来打开),如图:
3.按F12打开“开发者工具”。界面如图:
4.选择“调试器”选项,然后选择需要调试的JS代码,接着在合适的位置加入断点,如图:
5.按F11或者F10单步调试JS(F11和F10的区别:F11调试,单步执行,进入调用的其它函数;F10调试,单步执行,不进入调用的其它函数)。也可以单机页面上相应的按钮进行调试。如图:
1)首先来看一下目前IE11存在的一些js兼容问题。2)其次来确认一下自己的笔记本的系统信息
1)登入的系统(为了信息安全,图片进行了简单处理)
2)在IE11默认的打开的方式下,鼠标单击任何按钮都是没有效果的,单击日志查询后再单击设备管理,可以看到页面是没有响应事件的。此时需要激活IE11下的兼容模式来浏览本页面。
进入IE11的兼容模式
1)在IE11页面内按F12 打开全新的开发者工具,。
2)在左侧找到 仿真功能,里面设置 文档模式与 用户字符串 都改为IE7的模式,这样就进入了浏览器的兼容模式,此时再回到刚才的页面 点击 日志查询 按钮 可以看到下面已经响应了js事件。
现在找到需要调试的页面中js脚本
1)打开需要进行调试的页面,在开发者工具中的 DOM资源管理器中 使用 选择元素 按钮,选出的文档位置。
2)在DOM资源管理器中找到 的js脚本位置,因为是在DOM资源管理器中打开的,所以在这里只能看不能操作,打开的js也是用文本的方式呈现出来的。
通过上面一步,如果能够定位到的js代码就已经确定可以进行js的debug调试了。
1)打开开发者工具中的调试程序功能,。
2)点击左上角的文件夹图标,找到的js代码
到这里为止,的IE11浏览器就能帮调试js代码啦。
还有另一种方式来调试js脚本
就是借助非IE的但是用IE内核做成的浏览器,比如360急速浏览器。
在兼容模式下,F12进入开发者工具,就会见到熟悉的画面了。