title: Vue - Mixed content warning in Chrome Developer Console
body: <p>I have a Vue.js app up and running, which produces the following warning.</p>
  
  <pre><code>Mixed Content: The page at 'https://mypage.com/some/route' was loaded over HTTPS, but requested an insecure resource 'http://mypage.com/some/route'. This request has been blocked; the content must be served over HTTPS.
  </code></pre>
  
  <p>The request is visible in the network tab. That's not all however.</p>
  
  <ul>
  <li>It only occurs once after a refresh. (F5)</li>
  <li>It occurs exactly when Chrome dev tools are opened. (F12)</li>
  <li>If dev tools were already open when the page was loaded, no HTTP request occurs.</li>
  <li>With all plugins disabled, in incognito, the request is still sent.</li>
  <li>The message is not shown in Firefox, or for any other web page in Chrome.</li>
  <li>There are no absolute references to a HTTP address in the Vue app.</li>
  <li>When I put scripts on PAUSE and re-open the console after a refresh, the request occurs but I do not enter a debugging state.</li>
  <li>When I add a breakpoint to stop on any request containing "http://", the breakpoint is never activated.</li>
  </ul>
  
  <p>What could the problem be? How can I diagnose this spooky behavior?</p>