In the network tab of dev tools, on the top left of the dev tools there should be a checkbox labelled `Preserve log`. Click that and it will preserve network upon navigation.

![Chrome screenshot][1]


  [1]: http://i.imgur.com/1knbl75.png


(older versions may have the record button in the buttom left, as seen [here](http://i.stack.imgur.com/xGMz3.png))


I am making an application in Python which collects data from a serial port and plots a graph of the collected data against arrival time. The time of arrival for the data is uncertain. I want the plot to be updated when data is received. I searched on how to do this and found two methods:

 1. Clear the plot and re-draw the plot with all the points again.
 2. Animate the plot by changing it after a particular interval.

I do not prefer the first one as the program runs and collects data for a long time (a day for example), and redrawing the plot will be pretty slow.
The second one is also not preferable as time of arrival of data is uncertain and I want the plot to update only when the data is received.

Is there a way in which I can update the plot just by adding more points to it only when the data is received?

Dynamically updating plot in matplotlib

I have a div `#popup` that is dynamically filled with several paragraphs with the class `.filled-text`. I&#39;m trying to get jQuery to tell me if `#popup` has one of these paragraphs in it.

I have this code:

    $(&quot;#text-field&quot;).keydown(function(event) {
        if($(&#39;#popup&#39;).has(&#39;p.filled-text&#39;)) {
	        console.log(&quot;Found&quot;);
	     }
    });

Any suggestions?

Using jQuery to see if a div has a child with a certain class

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

Google Developer Tools "Network" 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 "Persist" option:
(The "Persist" 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.)
<a href="https://getfirebug.com/wiki/index.php/Console_Panel" target="_blank" rel="noopener noreferrer">https://getfirebug.com/wiki/index.php/Console_Panel</a>

I am having issues  with google chrome not rendering svg with an `img` element.  This happens when refreshing the page and initial page load.  I can get the image to show up by &quot;Inspecting Element&quot; then right clicking the svg file and opening the svg file in a new tab.  The svg image will then be rendered on the original page.

    &lt;img src=&quot;../images/Aged-Brass.svg&quot;&gt;

Totally at loss here as to what the issue is.  The svg image renders fine in IE9 and FF just not in Chrome or Safari.

I have my MIME types set as well.  (image/svg+xml)


**EDIT:**
Here is a simple html page that I built to help illustrate my issue.

    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;SVG Test&lt;/title&gt;
    
        &lt;style&gt;
            #BackgroundImage{
                background: url(&#39;../images/Aged-Brass.svg&#39;) no-repeat scroll left top;
                width: 400px;
                height: 600px;
            }
    
            #image_element {
                width: 400px;
                height: 600px;
                margin: 0px;
                padding: 0px;
            }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id=&quot;image_element&quot;&gt;
            &lt;img src=&quot;../images/Aged-Brass.svg&quot;&gt;
        &lt;/div&gt;
        &lt;div id=&quot;BackgroundImage&quot;&gt;&lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;


As you can see I am trying to use an svg file in both an `img` element and in css as a background image.  Neither work on the initial page load in chrome or safari.  When I inspect element right click svg or click link to svg load in another window the svg file will render in original tab.

Chrome not rendering SVG referenced via &lt;img&gt; element

Using javascript, I want to open a new page in a different tab, but remain focused on the current tab. I know I can do it like this:

    open(&#39;http://example.com/&#39;);
    focus();

However, when I do this in chrome, it flashes the new tab for a moment before switching back to the current tab. I want to avoid this.

The application is a personal bookmarklet, so it only has to work in the latest Chrome.

Open a new tab in the background?


How can we disable Chrome&#39;s autofill feature on certain `&lt;input&gt;`s to prevent them from being  automatically populated when the page loads?

At the same time I need to keep autocomplete enabled, so the user can still see the list of suggestions by clicking on the input or typing in it. Can this be done?

**EDIT:** Feel free to use plain Javascript or jQuery if you feel it is necessary or you feel like it would make your solution simpler.

Disable form autofill in Chrome without disabling autocomplete

I use the Google Webfonts service on my website and rely heavily on it. It renders fine on most browsers, but in Chrome on Windows it renders especially bad. Very choppy and pixelated.

What i have found out so far is that Chrome requires the .svg format font to be loaded first. The font i am using however, called Asap, was only available in .woff. I converted it to .svg using a free online service, but when i added that to my stylesheet (before the .woff), it didn&#39;t change anything.

I&#39;ve also tried: 

    -webkit-font-smoothing: antialiased;
    text-shadow: 0px 0px 0px;

Hoping that either would help the text render more smoothly. 

Right now i&#39;ve run out of ideas and i would hate to change fonts. Does anyone have an idea how i can solve this problem? I&#39;ve been using the Adobe Browserlab to test the rendering, seeing as how i only own a mac. The link to the site is: [www.symvoli.nl/about][1]

Thanks in advance!


**Edit April 11th, 2013:**

Chrome 35 Beta seems to have finally solved this issue:

![enter image description here][2]


  [1]: http://www.symvoli.nl/about
  [2]: http://i.stack.imgur.com/9p3NA.png

Google webfonts render choppy in Chrome on Windows

Trying to set `window.location` or using `window.navigate()` to make the browser go to `about:crash` or `chrome://crash` doesn&#39;t work. Is there a way to do it?

How do you force Chrome pages/tabs to crash using JavaScript?

I&#39;ve got a page that&#39;s redirecting when it shouldn&#39;t be, and I&#39;m trying to figure out who&#39;s doing it. First I tried hijacking window.location:

    window.location = (function (location) {
        // location is now hidden inside a closure. We can override it
        var Location = Object.create(location);
        // Location is now our proxy. We can use it to catch changes
        window.__defineGetter__(&#39;location&#39;, function () { return Location });
        window.__defineSetter__(&#39;location&#39;, function (x) { debugger; location = x; return x; });
        // etc etc, considered assignments to location.href, location.search, location.host etc., as well as calls to location.replace and location.assign
    }(window.location));

That didn&#39;t work at all in Chrome. You can&#39;t do setters and getters on window.location for security reasons. OK. The next thing I tried was observing onunload and onbeforeunload:

    [&#39;unload&#39;, &#39;beforeunload&#39;].forEach(function (evName) {
        window.addEventListener(evName, function () {
            debugger; // Chance to check everything right before the redirect occurs
        });
    });

I knew that the value of window.location would stay the same until after the onunload event, again for security reasons, but I was hoping for some other clue; no such luck. I next tried putting breakpoints at every point I can find in my own scripts where window.location could possibly be assigned. None of them are hit according to the Chrome debugger. Argh. This redirect is not happening in FF, by the way, and I already tried restarting Chrome. I feel like I&#39;ve truly tried everything and gotten nowhere, which hopefully means I&#39;m about to level up as a developer? Please?

Is there any way in any browser for me, the human operating the debugger, to break on the line that&#39;s redirecting the page location? I understand there are security implications for allowing automatic access to that information, but is there nothing that privileges the developer and allows a way to do it? If not, what&#39;s the normal way of dealing with a situation like this? It seems common enough and I don&#39;t think anyone likes getting blocked for hours or days on a conceptually simple problem. TIA

Break when window.location changes?

Firebug for Firefox has a nice feature, called &quot;Break on property change&quot;, where I can mark any property of any object, and it will stop JavaScript execution right before the change.

I&#39;m trying to achieve the same in Google Chrome, and I can&#39;t find the function in Chrome debugger. How do I do this in Google Chrome?

Breakpoint on property change

I have changed my coding style with more complex projects to loading pages (And their embedded scripts) &quot;on demand&quot; recently. However, it is difficult to debug those scripts as when they are loaded like:

    jQuery.get(&#39;/myModularPage&#39;, function(html){ /* insert the loaded page into the DOM */ });

or

    $(&#39;#some-container&#39;).load(&#39;/myOtherPage&#39;);

These scripts run perfectly, but if I&#39;m debugging, how can I set breakpoints in these dynamically loaded pages and scripts?

How do I debug Javascript which was loaded via AJAX (specifically jQuery)

I want to inspect my website CSS/HTML elements in my Android browser.

However it will be over a smartphone or the Android SDK. 

What is the best way to do it?

How can I inspect element in an Android browser?

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?

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 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

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?

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

Content Type	Original Author	Original Content on Stackoverflow
Question	Rodrigo Graça	View Question on Stackoverflow
Solution 1 - Google Chrome	Snuffleupagus	View Answer on Stackoverflow

Google Developer Tools "Network" Tab clears after redirect

Google Chrome Problem Overview

Google Chrome Solutions

Solution 1 - Google Chrome

Using jQuery to see if a div has a child with a certain class

Dynamically updating plot in matplotlib

Attributions