关键词：
是可以调试js的。
使用的工具：谷歌浏览器、测试的网站；
可以按照下面的方法进行调试：
1、f12 打开开发者工具，控制台介绍：
Elements：页面元素，可以进行编辑，保存后实时查看页面效果；
Network： 查看js模拟的http请求，例如下图中修改购物车中商品数量，可以实时的看到请求地址，直接上图。
2、点击请求地址，会把请求的头信息和响应信息等数据展示出来，此处非常便捷，展示样式比firebug更直观，直接上图，可以点击查看头信息，preview，响应信息，cookie，timeline对我们有用的。注意，preview是此处模拟http请求的发送数据，直接预览出来了。
3、Sources：次功能是js页面调试中最突出的功能，上图。
功能介绍：左侧sources目录可以展开，查看加载本页面所调用的资源，如js，css，php。此处先介绍断点调试，可以顺序的看到程序的执行过车，勾选右侧的Any XHR 按钮，上图。
4、一步一步执行，如添加数量的时候，可以看到右侧的call stock进程，可以看到此处出发了js中changePrice()函数，在此处我们可以进行逻辑分析了。或则在代码行处单击设置断点，英文选项是add breakpoints，单击右击都可以，最是好用，上图。
5、可以查看你设置的所有断点，右侧展开，如图，断点调试用的比较多，当然了还可以在js里直接写代码，查看实时数据变化，查看要注意ctrl+s 保存操作。
6、Timeline：次功能是查看页面性能，页面渲染速度的，一般是用不到的。测试人员可以查看，图中展示一些性能参数供参考，上图。
Profile：次功能主要测试加载文件速度参考，可以在此处上传我们的文件供测试用。点击 Load上传即可，一般用不着。
备注：Console：此功能是模拟js控制台，直接写代码，查看结果。高级功能使用时开启断点，查看变量的变化过程。还可以条用函数。
参考技术A 方法/步骤打开测试网址：
f12 打开开发者工具：
控制台介绍：
Elements：页面元素，可以进行编辑，保存后实时查看页面效果
Network： 查看js模拟的http请求，例如下图中修改购物车中商品数量，可以实时的看到请求地址，直接上图。点击请求地址，会把请求的头信息和响应信息等数据展示出来，此处非常便捷，展示样式比firebug更直观，直接上图，可以点击查看头信息，preview，响应信息，cookie，timeline对我们有用的。注意，preview是此处模拟http请求的发送数据，直接预览出来了。
Sources：次功能是js页面调试中最突出的功能，上图。
功能介绍：左侧sources目录可以展开，查看加载本页面所调用的资源，如js，css，php。此处先介绍断点调试，可以顺序的看到程序的执行过车，勾选右侧的Any XHR 按钮，上图。一步一步执行，如添加数量的时候，可以看到右侧的call stock进程，可以看到此处出发了js中changePrice()函数，在此处我们可以进行逻辑分析了。或则在代码行处单击设置断点，英文选项是
add breakpoints，单击右击都可以，最是好用，上图，还可以查看你设置的所有断点，右侧展开，如图，断点调试用的比较多，当然了还可以在js里直接写代码，查看实时数据变化，查看要注意ctrl+s 保存操作。
Timeline：次功能是查看页面性能，页面渲染速度的，一般是用不到的。测试人员可以查看，图中展示一些性能参数供参考，上图。
Profile：次功能主要测试加载文件速度参考，可以在此处上传我们的文件供测试用。点击 Load上传即可，一般用不着。
Resources：次功能是查看加载页面所用的资源，链接的数据库，域名下保存的cookie信息等都可以查看，上图，点击左侧栏目，依次查看。
Audits：次功能也是性能测试，上图，点击run执行，查看效率，不是很重要，上图。
Console：此功能是模拟js控制台，直接写代码，查看结果，上图。高级功能使用时开启断点，查看变量的变化过程。还可以条用函数，上图。还有好些工能需要我们慢慢的学习分享。 参考技术B
首先请打开“谷歌浏览器”（废话），然后打开一个网页，按“F12”会出现一个控制台，找到一个叫做“Sources”,点击它
OK，如果你的页面现在已经加载过JS脚本的话，那么应该可以看到一些JS文件了
然后你可以在左侧侧栏的序号那些位置点击一下就设置成断点，当你要执行某个函数的时候浏览器就会自动进入调试模式了
有没有专业的调试工具？
追答自带的工具已经很全了
追问就是想问详细的debug方法，我现在用f12主要是高度html+css方面，js不会调试
追答JS调试
设置断点
http://blog.csdn.net/teresa502/article/details/5087241
如何使用 Chrome 远程调试 CasperJS？
】如何使用Chrome远程调试CasperJS？【英文标题】：HowtoremotedebugCasperJSwithChrome?【发布时间】：2014-12-2504:40:01【问题描述】：在Chrome中调试CasperJS脚本的步骤是什么？我正在尝试在我的Windows8.1上进行调试。1)我的测试c:\\temp\\googletesti... 查看详情
chrome如何调试js
是可以调试js的。使用的工具：谷歌浏览器、测试的网站；可以按照下面的方法进行调试：1、f12打开开发者工具，控制台介绍：Elements：页面元素，可以进行编辑，保存后实时查看页面效果；Network：查看js模拟的http请求，例如下... 查看详情
chrome浏览器或者360极速浏览器，如何查看网页js文件
...览器有调试器可以看JS文件的，不过我不喜欢用火狐，在Chrome浏览器或者360极速浏览器，如何查看网页JS文件，我知道火狐浏览器中的调试器可以查看，还有什么简单的调试查看方法吗按F12再选择source菜单栏就可以看到js列表以及... 查看详情
如何使用 Firefox 调试 Node.js？
...间】：2018-04-2512:06:42【问题描述】：我知道如何使用GoogleChrome访问Chrome开发工具来调试Node.js应用程序：只需转到about://inspect。我在MDN上看到一行文字提到Firefox可以用于Node.js应用程序，但是在Firefox中访问about://inspec 查看详情
如何只调试一个js文件
...我想知道JS代码正在为当前用户交互执行什么。我已经在chrome中设置了断点为describehere.但是已经有很多JS文件并且很多是由他自己的VisualStudio添加的。所以我很难得到准确的代码。所以在这种情况下，我需要一些能让我只调试xy 查看详情
如何将 firefox 设置为 React-Native 的默认远程 JS 调试器？
...2019-02-2706:03:33【问题描述】：由于某种原因，我没有安装chrome。当我点击“远程调试JS”时，我收到一条日志说“找不到chrome”，当我尝试在firefox中访问url时：http://lo 查看详情
chrome调试折腾记_js断点调试技巧
JS调试技巧技巧一：格式化压缩代码技巧二：快速跳转到某个断点的位置右侧的Breakpoints会汇总你在JS文件所有打过的断点，点击跟checkbox同一行的会暂时取消这个断点，若是点击checkbox下一行的会直接跳转到该断点的位置技巧三... 查看详情
用chrome调试node.js代码
1.全局安装 node-inspector cnpminstall-gnode-inspector2.启动node项目入口文件，如node--inspectindex.js3.控制台将出现如下地址字样，将后面的路径放到chrome中打开。Debuggerlisteningonws://{host}:{port}/8483d157-1020-49ac-b537-44.在chrom 查看详情
chrome调试，js正常运行，但找不到代码，无法调试
...load(B.html")载入B.html，载入后C.js能正常运行，但是在Chrome调试器中找不到C.js，无法调试。如果加debugger显然影响调试效率。这个问题好歹还能调试，虽然麻烦点。2.如果通过document.write重写html的方法将B.html写入A.html中(整体覆... 查看详情
无法使用 Chrome DevTools 调试 node.js
】无法使用ChromeDevTools调试node.js【英文标题】：Can\'tdebugnode.jsusingChromeDevTools【发布时间】：2019-08-1408:35:19【问题描述】：当我运行node--inspectapp.js时，它显示“已连接调试器”。然后我打开chrome://inspect，我看到我的应用程序在那... 查看详情
ie浏览器如何调试asp.net的js代码
...前端js代码的浏览器工具。比如IE浏览器、firefox浏览器、chrome浏览器等。用哪个浏览器进行调试看个人习惯。小编习惯用IE浏览器。下面小编讲讲如何使用IE浏览器调试Asp.net的js代码。工具/原料IE浏览器、VS2012方法/步骤 首先... 查看详情
如何在不使用 chrome 开发人员工具的 Visual Studio Code 中调试 Angular 应用程序？
】如何在不使用chrome开发人员工具的VisualStudioCode中调试Angular应用程序？【英文标题】：HowtodebugangularapplicationinVisualStudioCodenotusingchromedevelopertools?【发布时间】：2020-01-1805:21:27【问题描述】：目前我正在使用Chrome浏览器的开发人... 查看详情
如何在 Chrome 浏览器中调试 AngularJS [关闭]
】如何在Chrome浏览器中调试AngularJS[关闭]【英文标题】：HowtodebugAngularJSinChromeBrowser[closed]【发布时间】：2014-04-1418:30:12【问题描述】：我正在研究AngularJS。我想在chrome中调试代码。在firefox中，我可以借助firebug对其进行调试。任... 查看详情
Chrome DevTools 不显示 .js 文件
】ChromeDevTools不显示.js文件【英文标题】：ChromeDevToolsdonotshow.jsfiles【发布时间】：2020-04-1723:45:32【问题描述】：我正在开发一个小型Angular应用程序，并尝试在ChromeDevTools中对其进行调试。但是，我在那里只能看到.ts文件。如何查... 查看详情
在chrome开发者工具中调试node.js
命令行工具devtool，它可以在Chrome的开发者工具中运行Node.js程序。下面的记录显示了在一个HTTP服务器中设置断点的情况。该工具基于Electron将Node.js和Chromium的功能融合在了一起。它的目的在于为调试、分析和开发Node.js应用程序提... 查看详情
如何通过chrome远程调试获取网页资源内容
】如何通过chrome远程调试获取网页资源内容【英文标题】：howtogetwebpageresourcecontentviachromeremotedebugging【发布时间】：2016-08-0107:41:30【问题描述】：我想通过Chrome调试协议使用python获取网页资源内容，从这个页面method-getResourceConten... 查看详情
使用 Chrome 开发工具进行 JS 调试 [重复]
】使用Chrome开发工具进行JS调试[重复]【英文标题】：JSdebuggingusingChromedevtools[duplicate]【发布时间】：2019-02-0622:17:07【问题描述】：有没有办法在所有JS代码中设置断点？例如，假设我有一个按钮，当我点击它时，会执行一些JS代... 查看详情
如何在 Chrome 中安装 Flash 调试播放器？
】如何在Chrome中安装Flash调试播放器？【英文标题】：HowdoIinstalltheFlashdebugplayerinChrome?【发布时间】：2011-04-1719:02:50【问题描述】：Chrome现在与Flash捆绑在一起......很好，但是如何安装Flash调试播放器？【问题讨论】：【参考方案1... 查看详情