In Google Chrome, how you can check which files are served from the browser cache, and which comes from the server?

Check whether network response is coming from server or Chrome cache

How to enable &quot;Preserve Log&quot; in Network tools in Chrome developer tools by default? Everytime I press F12 and then select Network tab, I need to click preserve log checkbox to make it preserve request/responses. Is it possible to have it checked all the time by default?

[![enter image description here][1]][1]


By the way this feature works in &quot;Firefox Developer&quot; edition. When I click &quot;Persist Logs&quot; and close and then open the browser &amp; DEV tools window again, it is still checked.

[![enter image description here][2]][2]


# UPDATE - 6th March 2019

This will be fixed in Chrome 73. But if you want to try it before that then install **[Chrome Canary][3]**. It&#39;s working there. To enable/disable this persistence just go to [Dev tools settings][4] and check/uncheck Preserve Log under network section as shown below.

[![enter image description here][5]][5]

Thanks to the team for fixing it. Better late than never.


  [1]: https://i.stack.imgur.com/YC9dY.png
  [2]: https://i.stack.imgur.com/uZ6KP.png
  [3]: https://www.google.com/chrome/canary/
  [4]: https://developer.chrome.com/docs/devtools/customize/#settings
  [5]: https://i.stack.imgur.com/n6SfI.png

How to enable &quot;Preserve Log&quot; in Network tab in Chrome developer tools by default?

Traditionally I use FireBug to debug my AJAX requests. It lets you examine both the contents of your request as well as the response that was sent back from the server. (it also notifies you in the console when these occur, which is a useful feature that Chrome seems to lack).

In Chrome, I only seem to be able to view the requests, not the responses. When I try to examine the response the UI just displays &quot;No Content Available&quot; (Developer Tools &gt; Resources &gt; myRequest.php &gt; Content). Do I have to turn something on to make the Chrome developer tools remember these requests?

EDIT: In case it matters, these requests are being made inside a Flash object.

View AJAX response content in Chrome developer tools?

I use some themes for Google Developer Tools from this website: http://devthemez.com/themes/chrome-developer-tools

However, after the 32.0.1700.76 m update, all themes have stopped working.

What do I need to do to get them working again?


Custom.css has stopped working in 32.0.1700.76 m Google Chrome update

Well, this is pretty straightforward. If Chrome&#39;s Developer Tools is showing me that a style is overridden, how to see what CSS rule is overriding it?

I want to know if is there anything like *&quot;Show me what overrides this&quot;*.



**OBS:** *Please, don&#39;t point me to Firebug.*

Chrome Developer Tools: How to find out what is overriding a CSS rule?

I have a query which involves getting a list of user from a table in sorted order based on at what time it was created. I got the following timing diagram from the chrome developer tools.

![timing from the chrome][1]


You can see that TTFB (time to first byte) is too high.
&lt;br/&gt;
I am not sure whether it is because of the SQL sort. If that is the reason then how can I reduce this time?
&lt;br/&gt;
Or is it because of the TTFB. I saw blogs which says that TTFB should be less (&lt; 1sec). But for me it shows &gt;1 sec. Is it because of my query or something else?
&lt;br/&gt;
I am not sure how can I reduce this time. 
&lt;br/&gt;
I am using angular. Should I use angular to sort the table instead of SQL sort? (many posts say that shouldn&#39;t be the issue)
&lt;br/&gt;
What I want to know is how can I reduce TTFB. Guys! I am actually new to this. It is the task given to me by my team members. I am not sure how can I reduce TTFB time. I saw many posts, but not able to understand properly. What is TTFB. Is it the time taken by the server?



  [1]: http://i.stack.imgur.com/LOPEF.png

How can I reduce the waiting (ttfb) time

Google Developer Tools &quot;Network&quot; Tab clears after redirect to another page and i want to know if there is any way to keep all request?

I want to do this because i want to verify one POST request but it redirects and get cleared.

In firebug we can use the &quot;Persist&quot; option:

(The &quot;Persist&quot; option prevents clearing the console at a page reload. That means, the messages will stay inside the console as long as this option is enabled.)
https://getfirebug.com/wiki/index.php/Console_Panel

Google Developer Tools &quot;Network&quot; Tab clears after redirect

Is there a way to force Xcode to trim trailing whitespaces when I save file?

I&#39;m using version 3.1.3 if that matters.

Trim trailing spaces in Xcode

I am not new to this but I am unable to fix my signing identity from Xcode Version 6.2 (6C86e). When I click **fix issue** on the following message:

 ![enter image description here][1]

I get a pop up window saying:

&gt; &quot;The selected team&#39;s agent, &#39;Name Surname&#39; must agree to the latest
&gt; ios Program License Agreement.  Please visit the Member Center.
&gt; https://developer.apple.com/membercenter&quot;

I went on &quot;https://developer.apple.com&quot; and accepted the latest iOS Program agreement. This is what I can see on my legal agreements section:

![enter image description here][2]

However the message on Xcode keeps popping up.. I tried loggin in and out but it does not show me the legal agreement message anymore so I assume on their server side is accepted. I wonder if this is because **iTunes connect is temporarily unavailable**.

Any idea on how to fix this? 


  [1]: http://i.stack.imgur.com/YV3mX.png
  [2]: http://i.stack.imgur.com/7VU31.png

Unable to fix signing identity issue on Xcode

For some reason device emulation mode is not reading my media queries. It works on other sites including my own sites that I made with bootstrap, but it&#39;s not working on media queries I am using from scratch (clicking the media queries button turns the button blue but no media queries are displayed). Test file below. Is this a bug in Chrome or is there something I need to change in my file?


    &lt;!DOCTYPE html&gt;
    &lt;!--
	Media Queries Example 1
	Sam Scott, Fall 2014
    --&gt;
    &lt;html&gt;
	&lt;head&gt;
		&lt;title&gt;MQ Example 1&lt;/title&gt;
		&lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
		&lt;style&gt;
			body { font-family: sans-serif; }
			h1 { color: red; } 
			h2 { color:blue; }
			p { color:green; }
			
			@media (max-width: 768px) and (min-width: 481px) {
				h1 { color: green; } 
				h2 { color:red; }
				p { color:blue; }
			}
			
			@media (max-width:479px), print { 
				h1,h2,p { color:black; }
			}
			
			@media print {
				body { font-family: serif; }
			}
			

		&lt;/style&gt;
	&lt;/head&gt;
	&lt;body&gt;
		&lt;h1&gt;I&#39;m a first level heading&lt;/h1&gt;
		&lt;p&gt;I&#39;m a paragraph.&lt;/p&gt;
		&lt;h2&gt;I&#39;m a second level heading&lt;/h2&gt;
		&lt;p&gt;I&#39;m another paragraph.&lt;/p&gt;
	&lt;/body&gt;
    &lt;/html&gt;

Chrome Device Mode Emulation Media Queries Not Working

I&#39;ve been trying to see which `srcset` image my browser is using via the browsers developer tools, but apart from using the network tab to see which image it fetches i can&#39;t tell.

 Using the network tab would usually be fine, but sometimes I&#39;ve noticed that it will fetch 2 image versions at different sizes, this would happen if one break point is at 600 and another at 900 and the browser was currently at 750px wide. 

(Ive tried this both on Chrome &amp; FireFox, and it seems chrome will pull down both images in certain cases, but FireFox seems to only ever pull down one)

The reason I want to know is I&#39;m interested if it pulls down two image srcset dose it swap between them automatically as i scale the browser window ? This is can&#39;t tell as by inspecting the element it just gives the raw html of the `img` element, not the actual `img srcset` option its using. 

Is it possible to see which srcset image a browser is using with browser developer tools

I am doing the C[hrome debugging tutorial][1], using NetBeans and Google Chrome. Everything, including extensions, seems to work correctly, but when I get to section `Use the Debugger`, I cannot see the html code to insert a breakpoint.

After selecting inspect popup on the browser, it opens in Console, showing nothing, Elements shows popup.html with images added. When I go to Sources, the file popup.html can be opened, but the only line, Line 1, is blank. If I open the js file, the js file is there and can be edited (break pointed).

I am sorry - probably something basic, but I&#39;m not very experienced with this. I&#39;ve tried reloading and refreshing everything.

FOLLOW-UP: By entering `location.reload(true)` into the Console prompt, the popup.html file became visible as Source! Why? No idea.

I hope this saves someone the full day I spent stumbling around.


  [1]: http://developer.chrome.com/extensions/tut_debugging.html

Chrome Developer tool: html script is blank (in source) debugging tutorial

Using Google Chrome, if you `console.log` an object, it lets you inspect the element in the console. For example:

    var a = { &quot;foo&quot; : &quot;bar&quot;, &quot;whiz&quot; : &quot;bang&quot; };
    console.log(a);

This prints out `Object` which can be inspected by clicking on arrows next to it. If however I try to log an HTMLElement:

    var b = goog.dom.query(&#39;html&#39;)[0];
    console.log(b);

This prints out `&lt;html&gt;&lt;/html&gt;` which can not be inspected by clicking on arrows next to it. If I want to see the JavaScript object (with its methods and fields) instead of just the DOM of the element, how would I do that?

How can I log an HTML element as a JavaScript object?

What would cause a page to be canceled? I have a screenshot of the Chrome Developer Tools.

![Canceled Resource][1]

This happens often but not every time. It seems like once some other resources are cached, a page refresh will load the LeftPane.aspx. And what&#39;s really odd is this only happens in Google Chrome, not Internet Explorer 8. Any ideas why Chrome would cancel a request?


  [1]: http://i.stack.imgur.com/3ocdz.png

What does status=canceled for a resource mean in Chrome Developer Tools?

In Chrome&#39;s JavaScript console, how do I call a function that belongs to a .js file included in the webpage I am viewing?

Calling a Javascript Function from Console

When using [Safari Web Inspector][1] to read the JavaScript console output, the log is reset upon navigation i.e. going from page *index.html* to *mail.html* clears the console output. In the [Chrome Developer Tools][2], I can easily preserve the log by right clicking on the console space and selecting *Preserve Log Upon Navigation*. With this option, console log output remains intact until I manually clear the output simplifying the process of debugging JavaScript that refreshes or redirects to another page. 

Is there a similar feature in Safari Web Inspector? 


  [1]: https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html
  [2]: https://developers.google.com/chrome-developer-tools/docs/console

Safari Developer Tools: How to Preserve Console Log Upon Navigation?

I&#39;m testing some cookies that I&#39;m creating via JavaScript. Is there a way to check if the cookie was set in Chrome Developer Tools or something similar? 

How do you check cookies using Chrome?

On this website, there&#39;s a `div` with the attribute `class=&quot;item&quot;`. When I clicked &lt;kbd&gt;F12&lt;/kbd&gt; to bring up the Developer Tools. I pressed &lt;kbd&gt;Ctrl&lt;/kbd&gt; + &lt;kbd&gt;F&lt;/kbd&gt; and typed in `class=&quot;item&quot;` and no results came back. I also tried &lt;kbd&gt;Ctrl&lt;/kbd&gt; + &lt;kbd&gt;Shift&lt;/kbd&gt; + &lt;kbd&gt;F&lt;/kbd&gt; but nothing returned. Here is a screenshot:

![enter image description here][1]

Even if I search for `class=`, only text within HTML comments are found. [Thanks in advance for any help you are able to provide.][2]


  [1]: http://i.stack.imgur.com/b8kNC.png
  [2]: https://english.stackexchange.com/a/49224/46898

Searching for HTML elements in Chrome DevTools

As the title is it possible to emulate orientation in google chrome or firefox? Meaning somehow change the browser to support media query (orientation = (landscape or portrait))

I have a emulator for mobile, but I would like to have the developer tools from chrome or firebug.


### Update

Chrome v25 specific...

To anyone, in **Google Chrome Dev Tool &gt; Overrides &gt; Override Device Orientation** you can change the `alpha`, `beta` and `gamma`. I think this is a place to start of from, but I have no idea how these work and can therefor not find anything..

It is also possible to Emulate CSS Media, but not portrait and landscape, but print, screen, tv etc.

### Update v2
This is a old question, and Chrome have changed multiple times how to do this. 

Is it possible to emulate orientation in a browser?

When I use the Developer Tools in Chrome to collect JavaScript CPU Profiles, I am getting two mysterious warnings on functions:

 - Not optimized: optimized too many times
 - Not optimized: inlining bailed out

What do these actually mean? and what are some possible solutions?

Another one I&#39;ve seen is *Not optimized: TryCatchStatement*, but that makes sense. Solution is to remove the try-catch.

The closest attempt at an explanation I&#39;ve found so far was this - https://github.com/GoogleChrome/devtools-docs/issues/53

All Developer Tools Solutions on Gang of Coders

Total of 20 Developer Tools Solutions