标签: javascript-debugger

我正在研究远程 JavaScript 调试器和页面检查器。我试图找到一种方法来以编程方式获取页面加载的所有页面资产（样式表、脚本、图像、字体等）的列表，并将它们传递给远程检查器。我希望能够在检查员端编辑资产并将它们传递回客户端。最后，我想在页面加载后强制重新加载资源（例如重新加载样式表）。

是否有任何浏览器 API 或 JavaScript 技术可以做到这一点？

我可以想到两种方法：

1. 使用window.performance获得的资产清单。但是，不包含资源内容，并且依赖于解析 URL 来确定它是资源的类型。我不确定它是否也包含 CSS 图像之类的内容。
2. 抓取/解析页面的<style>、<script>、<img>标签并查看 CSS 以获取其他资源。非常劳动密集且容易出错，我仍然不知道它包含资源内容。

关于如何做到这一点的任何建议？

我一直在努力扩展console.log以制作一个彩色的，以保持堆栈跟踪到它被调用的位置。我尝试了一些解决方案，但最终达到了这一点：

export const colorizedLog = (
  text: string,
  status: keyof typeof ColorStatus = "dark",
  ...args: any
) =>
  console.log.bind(
    console,
    `%c ${text}`,
    `font-weight:bold; color: ${ColorStatus[status]}`,
    ...args
  );

有了这个小binding，我们将能够保留堆栈跟踪，但这里的问题是我们必须在最后使用它并添加一个烦人的额外内容()，因为返回值是函数本身，它是 的结果bind：

 colorizedLog(
    "Title:",
    "info",
    "This is a working example")();

我阅读过的其他主要资源如下：

1. 扩展 console.log
2. 使用 babel-kent.c dodds 的宏
3. Webpack 定义插件

const colorizedLog = (text, color= "#40a7e3", ...args) =>
  console.log.bind(
    console,
    `%c ${text}`,
    `font-weight:bold; color:${color}`,
    ...args
  );
colorizedLog("Title:", "#40a7e3", "This is a working example")();

更新：堆栈跟踪 …

我正在尝试使用enableWebScript端点行为设置具有多个端点的WCF服务,其中一个端点将在客户端上创建Javascript代理(jsdebug/js).

将服务引用添加到我的AJAX ScriptManager时,除非端点的地址为空,否则找不到jsdebug文件.ScriptManager代理似乎总是生成一个"MyService.svc/jsdebug"路径来查找该文件,即使我的服务的地址为"ajax".代理应该生成"MyService.svc/ajax/jsdebug"路径.

是否有设置使用正确的路径生成代理？我的服务是我网站的根源.

作品:

<endpoint address="" 
  behaviorConfiguration="ajaxBehavior" 
  binding="webHttpBinding" 
  bindingConfiguration="webBinding" 
  contract="MyTest.Web.ICustomerService" />

想要这个(不起作用):

<endpoint address="ajax" 
  behaviorConfiguration="ajaxBehavior" 
  binding="webHttpBinding" 
  bindingConfiguration="webBinding" 
  contract="MyTest.Web.ICustomerService" />

我正在研究这个页面:http://www.fxstreet.com/rates-charts/currency-rates/,它通过JavaScript不断更新来自服务器的新数据.很明显,页面中有一些JavaScript函数在不断执行.所以我打开了Firebug,我没有看到任何"profiler"类型输出会不断添加有关执行脚本的新信息."脚本"选项卡仅显示46条不太清晰的记录,没有时间戳,也没有任何迹象表明存在连续的新JavaScript活动.

我究竟做错了什么？如何在页面上浏览JavaScript活动？

我想开发一个Thunderbird 12插件.我写了一个简单的JS函数.(文件:"chrome\content\myApp.js").该文件由xul-'onclick'事件调用.我已将我的插件打包为.xpi文件,然后我安装了它.(好的,它正在工作!)

现在我想调试我的JS函数.但我找不到一个有效的JS Debugger.我试过这个插件:

• "Javascript Debugger"(0.9.89).不工作:线程不会在我的断点处停止.
• Firebug(1.7.2)+ Chromebug(1.7.2).不工作:我无法启用JS调试选项卡.(更新:我也无法设置/更改"上下文")

如果debugger在打开Chrome devtools的情况下将语句放入JavaScript源中，它将停止执行，因此可以从控制台以交互方式浏览当前上下文。真的很棒

但不幸的是，它还将切换到“源”选项卡并显示该debugger语句发生的行。大多数时候，我想输入JavaScript命令，因此必须手动切换回“控制台”选项卡。

我可以避免切换选项卡并停留在“控制台”选项卡中吗？

还是我使用错了？

我正在尝试设置一段包含debugger关键字的代码.我正在使用调试窗口(IE,FF,Opera)来查看CSS样式效果,但每次刷新页面时调试器都会停止(应该如此).

我可以通过浏览器切换或禁用调试器关键字(而不是从我的代码中删除它)所以我可以做我想要的样式,而不是每次刷新页面时都困扰我吗？

myApp.service('User', ['$localStorage', function ($localStorage) {
    debugger;
    this.$storage = $localStorage;
}]);

谢谢

调试器语句

我的项目中有很多JS文件.其中一些是外部库.我想知道JS当前用户交互正在执行什么代码.我已经在chrome中设置了断点,如此处所述.但是已经有很多JS文件和许多是由Visual Studio他自己添加的.所以我很难找到确切的代码.所以在这种情况下,我需要一些能够让我只调试xyz.js文件的东西.

我们可以在Chrome Dev工具的Sources面板中编辑和执行来自*.js文件的js代码.
如果js代码来自*.html文件,除了在那里添加断点之外,我们如何编辑和执行它们.
谢谢.

我有一个前端有 React 、后端有 .Net Core 的应用程序，我正在尝试调试我的 React 前端，没有扩展和附加到进程，但我收到以下消息错误：

\n

无法连接到 localhost:3000 处的目标：无法连接到 http:localhost:3000 处的调试目标：找不到任何可调试目标。

\n

我正在使用这个launch.json：

{\n    "version": "0.2.0",\n    "configurations": [\n        {\n            "name": "Debug FrontEnd",\n            "port": 3000,\n            "request": "attach",\n            "type": "chrome",\n            "webRoot": "${workspaceFolder}"\n        },\n        {\n            "name": "Debug BackEnd",\n            "type": "coreclr",\n            "request": "attach"\n        }\n    ]\n}\n

我npm start基本上使用witch启动我的前端react-scripts start。

观察：I\xe1\xb8\xbf 使用 Opera 浏览器。