title: Google chrome inspecting media queries colored bars
body: <p>The documentation for Google Chrome Emulator at <a href="https://developer.chrome.com/devtools/docs/device-mode" rel="nofollow">https://developer.chrome.com/devtools/docs/device-mode</a> says, </p>
  
  <blockquote>
    <p>"To view the media query inspector, click the Media queries media queries icon icon in the upper left corner of the viewport. The DevTools detect media queries in your stylesheets and display them as colored bars in the top ruler." </p>
  </blockquote>
  
  <p>I have clicked on the icon and notice that it is active. However, no colored bars appear anywhere. </p>
  
  <p>Chrome tells me that my version, Version 38.0.2125.122, is up-to-date. The rest of the emulator seems to work OK. The colored bars documented would be REALLY helpful, so I would be extremely grateful if someone could complete or correct Google's instructions. </p>
  
  <p>What would be really terrific is if the emulator could display the file name of the external .css document, as I have a mediaqueries.css document that points (that's the object anyway) to various .css external style sheets. Based on what I'm seeing under the "Elements" tab in the "dock"? (Google doesn't seem to have a name for the window), it looks like some of the tests, e.g, "Apple iPhone 3GS" or "Apple iPhone 5", etc., are picking up styles from different style sheets. I didn't know that was possible. </p>