google-chrome-devtools 相关问题

Chrome DevTools是Google Chrome内置的网络开发者工具。

TL;DR：是否有浏览器设置可以增加/禁用开发工具的 console.log 截断长度？我问这个问题是因为我正在寻找解决这个 Firefox bug 的方法...

javascript google-chrome firefox google-chrome-devtools firefox-developer-tools

回答 1 投票 0

考虑下面这个愚蠢的例子：愚蠢的片段变量我 = 0; 同时（我< 100) { console.log(i); ...</desc> <question vote="2"> 考虑以下愚蠢的例子： <pre><code><!doctype html> <meta charset="utf-8"> <title>dumb snippet</title> <script> var i = 0; while (i < 100) { console.log(i); debugger; i += 1; } </script> </code></pre> 如果我使用 Google Chrome 的 DevTools 运行此代码，调试器会尽职尽责地在 <pre><code>debugger</code></pre> 语句处停止执行，但我还没有找到任何方法来立即中止（并重新启动）脚本。 AFAICT，按 <pre><code>Ctrl-R</code></pre> 甚至 <pre><code>Shift-Ctrl-R</code></pre>，而不是重新加载页面，只会导致执行继续。 我发现的唯一办法是显而易见的，但不必要地不方便：完全杀死选项卡/窗口，然后打开一个新的。 Google Chrome DevTools 是否提供某种方法来立即中止在<pre><code>debugger</code></pre>语句处停止的脚本？ （如果答案恰好是“否”，请不要发布解决方法。我可以想到很多解决方法，例如按住 F-8 直到循环退出，当然，这不会起作用，如果无论如何，循环结果是一个无限循环，这里我只感兴趣是否有一个“官方”方法来中止和重新启动这样的脚本。） </question> <answer tick="false" vote="1"> 你可以这样做，但你必须先准备好你的代码。 在 Google Chrome 开发工具中停止脚本执行的说明： (1) 创建一个全局变量： <pre><code>var devquit=0; $(document).ready({ //the rest of your code </code></pre> (2) 在您可能希望退出的任何地方，插入此变量的测试： <pre><code>//Lotsa code if (devquit > 0) return false; </code></pre> (3) 在上述测试行或之前暂停执行脚本 (4)切换到控制台 (5) 类型： <pre><code>> devquit 0 > devquit=1 <=== only this line is necessary > devquit 1 </code></pre> (6) 继续执行脚本。当脚本执行上面步骤 (2) 中的测试时，将会 <pre><code>return false</code></pre> <hr/> 备注： (A) 这个技巧适用于全局变量和对象，但不适用于局部变量。 (B) 因此，您仍然可以对已经运行的代码使用此技巧 IF 您有一个全局变量或一个对象，如果它具有给定值，则该对象将返回 false。 (C) 在紧要关头，您还可以从 DOM 中（在“元素”选项卡上）删除一个元素，这将导致 JavaScript 错误。例如，假设你有代码 <pre><code>var cartype = $('#cartype').val();</code></pre> 如果你删除该行代码之前 ID=<pre><code>cartype</code></pre> 的元素，那么 js 将在该行中断。 但是，当您尝试重新运行代码时，该元素仍然会丢失。上述技巧允许您无限地运行和重新运行代码。 <hr/>更多注意事项： (a) 在代码中插入断点：只需在一行中单独键入 <code>debugger;</code><pre> 即可。如果 DevTools 打开，脚本将在此时跳转到调试器。如果 DevTools 未打开，代码将忽略语句。</pre> (b) 想要在调试代码时避免跳入 jQuery 库？将其黑盒化。请参阅适用于 Chrome 的黑盒说明<a href="https://developer.chrome.com/devtools/docs/blackboxing" rel="nofollow noreferrer"> - 或 - </a>适用于 Firefox<a href="https://hacks.mozilla.org/2013/08/new-features-of-firefox-developer-tools-episode-25/" rel="nofollow noreferrer"></a> <hr/>参考资料： 使用 Google Chrome 逐行调试 Javascript<a href="https://stackoverflow.com/questions/10638059/javascript-debugging-line-by-line-using-google-chrome?rq=1"></a> 在 Google Chrome 中调试时是否可以更改 javascript 变量值？<a href="https://stackoverflow.com/questions/4603021/is-it-possible-to-change-javascript-variable-values-while-debugging-in-google-ch"></a> </answer></body>

javascript debugging google-chrome google-chrome-devtools

回答 0 投票 0

如何抓取已禁用 DevTools 的网站

如何抓取已禁用 Chrome DevTools 的网站？使用 Puppeteer，我尝试使用特定航空公司各自的 CSS 选择器获取其出发和到达时间，但是......

javascript web-scraping google-chrome-devtools puppeteer cheerio

回答 1 投票 0

Chrome 未在“网络”选项卡中显示 OPTIONS 请求

我的 Web 客户端应用程序正在通过 fetch API 设置 HTTP POST 请求。我看到 OPTIONS 预检请求是通过调试代理（Charles Proxy）发送的，但它们没有显示在 Google Chr 中...

google-chrome cors google-chrome-devtools preflight

回答 5 投票 0

不要将 DevTools (F12) 中所做的更改保存到文件中

我有一个在本地运行的 MVC 站点，并且我使用 Visual Studio 作为我的主要 IDE，包括用于编辑 CSS 文件。我已在 Edge 中拉出本地站点并打开 DevTools (F12)。我想要 CSS 文件...