标签: google-chrome-devtools

我创建了一个简单的基于 webpack 的项目来学习 snabbdom。一切正常，除了 sourcemap 加载失败：

我不知道是谁的问题（webpack，chrome）。有知道的人吗？

繁殖步骤：

git clone https://github.com/tomwang1013/snabbdom-test.git
npm install
npm run dev

我有以下代码片段,它使用jQuery Form插件将表单发布到服务器(在ajax中).

  var options = {
    dataType: "json",
    success: function(data) { 
      alert("success");
    } 
  }; 

  $form.ajaxSubmit(options);

表格:

<form enctype="multipart/form-data" id="name_change_form" method="post" action="/my_account/"> 
<div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='6c9b552aaba88b8442077e2957e69303' /></div> 
  <table> 
    <tr> 
      <td> 
        <label for="id_first_name">First name</label>:
      </td> 
      <td> 
        <input name="first_name" value="Patrick" maxlength="30" type="text" id="id_first_name" size="30" /> 
      </td> 
    </tr> 
    <tr> 
      <td> 
        <label for="id_last_name">Last name</label>:
      </td> 
      <td> 
        <input name="last_name" value="Sung" maxlength="30" type="text" id="id_last_name" size="30" /> 
      </td> 
    </tr> 
  </table> 
  <input type="hidden" name="form_id" value="name_change_form" /> 
</form> 

ajax实现工作正常.但是我收到了警告

资源解释为Document但使用MIME类型application/json进行传输

在Chrome开发者工具中.我想找出为什么警告,甚至更好的解决方法.

我改为使用$.post而且神奇地从那时起错误就消失了.我不知道为什么$.post有效,但不是$form.ajaxSubmit.如果有人可以提供他们的解释,这将是伟大的.至少,这个问题已得到解决.以下是新代码.

var …

我正在尝试按照这里的教程.

我被困在DOM断点(靠近底部).

我去了他们正在谈论的示例网站.我按了ctrl+ shift+ i并导航到"元素"选项卡.在元素选项卡中,我找到了以下html部分:

<div id="profileCard" style="position: absolute; left: 403px; top: 135px; visibility: hidden; display: none; " class="goog-hovercard">
</div>

现在我一直试图找到上下文菜单:

在#profileCard元素上打开一个上下文菜单,并选择要中断的事件:子树修改,属性修改和节点删除

这是一个截图,显示我在哪里:

自最近的更新以来,Chrome DevTools现在展示了一个有用的设备模拟器:

哪个好,但我不会仿效任何东西:

• 设备中的所有选项都是未选中的
• 媒体中的所有选项都是未选中的
• 网络中的所有选项均未选中
• 传感器中的所有选项都是未选中的

单击"重置"按钮也会显示仿真栏.

如何在不使用时关闭Chrome DevTools设备模拟器？

我目前正在分析我的页面连接,我想在Chrome的开发人员工具中阻止我的网络监视器中的一些跟踪脚本和其他外部URL调用.

我很快想要检查页面在没有某些库的情况下的行为方式.

Chrome本身不提供此类功能,而着名的阻止扩展程序仅阻止用户手动输入导航栏的网址.

我正在学习JavaScript并且已经在Chrome控制台中进行了大量测试.即使我清除控制台,或者使用我在其他线程中看到的任何命令(localStorage.clear()),我指定的任何变量仍会显示出来.

例如,如果我做了类似的事情 localStorage.clear()

我清理并关闭控制台,重新打开它,然后寻找var name = "Bob";它的价值,它仍然存在name.

清除这些的最佳方法是什么？

如何增加Google Chrome开发者工具(或Firefox Firebug)中的调用堆栈条目数？我在第三方控件的Javascript中收到Javascript错误."调用堆栈"窗口中的所有调用都不属于我自己的代码.我想知道我的代码中的哪一行触发了事件序列.调用堆栈不够大,无法显示我自己的代码.

检查网站时,是否可以禁用特定的.css文件？我可以在FireFox中执行此操作,但无法在Chrome中找到该选项.

我们使用Genymotion来测试/调试基于WebView的Android应用程序.该设备通过Inspect Device显示在Chrome Dev Tools中,但没有检测功能.我们用/ whitout ADB和/ whitout Android Studio进行了不同的尝试,但没有运气.有什么不对/缺少？

我正在尝试第一次实现长轮询,并且我正在使用XMLHttpRequest对象来执行它.到目前为止,我已经成功地在Firefox和Internet Explorer 11中获取了活动,但Chrome奇怪的是这次奇怪的是.

我可以加载一个页面,它运行得很好.它立即发出请求并开始处理和显示事件.如果我在第二个选项卡中打开页面,其中一个页面开始看到接收事件的延迟.在开发工具窗口中,我看到了这种时序的多个请求:

"停滞"将持续长达20秒.它不会发生在每个请求上,但通常会连续发生在多个请求中,并且会出现在一个选项卡中.

起初我认为这是我的服务器的问题,但后来我打开了两个IE选项卡和两个Firefox选项卡,它们都连接并接收相同的事件而不会停止.只有Chrome遇到这种麻烦.

我认为这可能是我正在制作或提供请求的方式的问题.作为参考,请求标头如下所示:

Connection: keep-alive
Last-Event-Id: 530
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36
Accept: */*
DNT: 1
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8

响应如下:

HTTP/1.1 200 OK
Cache-Control: no-cache
Transfer-Encoding: chunked
Content-Type: text/event-stream
Expires: Tue, 16 Dec 2014 21:00:40 GMT
Server: Microsoft-HTTPAPI/2.0
Date: Tue, 16 Dec 2014 21:00:40 GMT
Connection: close

尽管涉及到标题,但我没有使用浏览器的原生EventSource,而是使用polyfill来设置其他标题.polyfill正在使用XMLHttpRequest,但在我看来,无论请求是如何进行的,它都不应该停顿20秒.

什么可能导致Chrome像这样失速？

编辑: Chrome的chrome:// net-internals /#events页面显示涉及超时错误:

t=33627 [st=    5]      HTTP_CACHE_ADD_TO_ENTRY  [dt=20001]
                --> net_error = -409 (ERR_CACHE_LOCK_TIMEOUT)

错误消息是指六个月前添加到Chrome的补丁(https://codereview.chromium.org/345643003),当多次请求同一资源时,该补丁实现了20秒的超时.实际上,补丁尝试修复的 …