当我在谷歌Chrome中打开开发人员工具时,我看到了各种各样的功能,如配置文件,时间线和审计,但基本功能,如能够在js文件和html和javascript代码中设置断点是缺失的!我尝试使用javascript控制台,它本身就有bug——例如,一旦遇到JS错误,除非刷新整个页面,否则我无法摆脱它。有人能帮忙吗?
当前回答
我也有同样的问题,如何调试JavaScript是在<script>标签。但后来我在Sources选项卡下找到了它,名为“(index)”,带圆括号。单击行号以设置断点。
这是Chrome 71。
其他回答
我的处境以及我是如何改变的: 我有一个javascript文件包括在一个HTML页面如下: 页面名称:test.html
<!DOCTYPE html>
<html>
<head>
<script src="scripts/common.js"></script>
<title>Test debugging JS in Chrome</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>
<script type="text/javascript">
document.write("something");
</script>
</div>
</body>
</html>
现在进入Javascript调试器在Chrome,我点击脚本选项卡,并下拉列表如上所示。我可以清楚地看到scripts/common.js,但我不能在下拉菜单中看到当前的html页面test.html,因此我无法调试嵌入的javascript:
<script type="text/javascript">
document.write("something");
</script>
这令人费解。然而,当我从嵌入脚本中删除过时的type="text/javascript"时:
<script>
document.write("something");
</script>
..然后刷新/重新加载页面,瞧,它出现在下拉列表中,一切又恢复正常了。 我希望这对任何在html页面上调试嵌入式javascript有问题的人都有帮助。
在脚本选项卡上打开开发人员工具时,刷新包含脚本的页面。这将在文件列表中添加一个(程序)条目,显示页面的html(包括脚本)。从这里可以添加断点。
如果你看不到“脚本”选项卡,请确保你启动Chrome时设置了正确的参数。当我用参数——remote-shell-port=9222启动Chrome调试服务器端JavaScript时,我遇到了这个问题。我没有问题,如果我启动Chrome没有参数。
使用Visual Studio(2012)我有同样的问题,切换到IIS Express解决了问题!
脚本标记的type属性没有被考虑在内。
由于某些原因,Visual Studio开发服务器没有提供Chrome启用断点所需的一切。
使用sources选项卡,可以在那里用JavaScript设置断点。在它下面的目录树中(其中有上下箭头),您可以选择要调试的文件。您可以通过按下同一选项卡右侧的resume来摆脱错误。
推荐文章
- AngularJS:工厂和服务?
- js:将一个组件包装成另一个组件
- 父ng-repeat从子ng-repeat的访问索引
- JSHint和jQuery: '$'没有定义
- 模仿JavaScript中的集合?
- 用JavaScript验证电话号码
- 如何在HTML5中改变视频的播放速度?
- 谷歌地图API v3:我可以setZoom后fitBounds?
- ES6/2015中的null安全属性访问(和条件赋值)
- 与push()相反;
- JS字符串“+”vs concat方法
- AngularJS使用ng-class切换类
- 访问Handlebars.js每次循环范围之外的变量
- 如何用JavaScript截屏一个div ?
- 如何为其他域设置cookie