You can enable it in DevTools Settings &gt; Preferences, under the Elements section.

**Update:**
Most of them might be confused on how to use it. To use, open console and hover on an element to view the ruler. Thanks [@Brandito](https://stackoverflow.com/users/8355619/brandito) for mentioning in the comment.

[![Show rulers][1]][1]

  [1]: https://i.stack.imgur.com/YUhxs.png

1. Click **Toggle Device Toolbar** [![Toggle Device Toolbar][1]][1] which is in the top-left of your DevTools window.

1. Click **More Options** and then select **Show rulers**.

     [![Show rulers][2]][2]

   The rulers are to the left of and above your viewport. You can click on the numbers to set the width and height to that size.

     [![Rulers][3]][3]


  [1]: https://i.stack.imgur.com/FTv2F.png
  [2]: https://i.stack.imgur.com/qK1o9.png
  [3]: https://i.stack.imgur.com/6VK3n.png

Click on the Chrome setting, then:

1. Under Preferences, Enable DevTools and enable Ruler.
2. Go to your page and right click on it, then click inspect.
3. Click Toggle Device Toolbar icon (top-left of DevTools window.

![enter image description here][1]


  [1]: https://i.stack.imgur.com/0iVCH.jpg

In Developer Mode Press Ctrl+Shift+P then type Ruler
[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/yE2qe.png

I have good experience in android app development using java. Recently I came to know about flutter. So, I have tried to create a simple android app with flutter based on official [tutorial][1]. But surprisingly the debug app size is 25MB and release apk costs more than 7MB. It is really larger when compare with native developed android app. 

Is there any way to optimize it?

  [1]: https://flutter.io/get-started/codelab/

Flutter apps are too big in size

I am trying to achieve  open specific screen on clicking push notification and my payload looks like this:

     var payload = {
            notification: {
                title: notificationTitle,
                body: notificationMessage,
                click_action:&quot;/screena&quot;,sound:&quot;default&quot;,
            }
        };

I am getting notification but I am unable to catch notification click event in flutter how to catch it. I am using flutter messaging

https://github.com/flutter/plugins/tree/master/packages/firebase_messaging


and my firebase push message service code looks like this

     pushMessagingService() async{
    messagingreference.configure(
    onMessage: (Map&lt;String, dynamic&gt; message) {

      print(&quot;I am here in on message&quot;);
      print(message);
    },
    onLaunch: (Map&lt;String, dynamic&gt; message) {
      print(&quot;I am here onLaunch&quot;);
      print(message);
    },
    onResume: (Map&lt;String, dynamic&gt; message) {
      print(&quot;I am hereonResume&quot;);
      print(message);
    },
    );
      messagingreference.requestNotificationPermissions(
      const IosNotificationSettings(sound: true, badge: true, alert: true));
     messagingreference.onIosSettingsRegistered
      .listen((IosNotificationSettings settings) {
    print(&quot;Settings registered: $settings&quot;);
     });
     messagingreference.getToken().then((String token) async {


    print(token);
     });
     }




here I can get the message as @xqwzts  said in on message when my app is in the foreground but my question is how to catch click event from push notification raised in the system tray and navigate to the required screen.

how to open particular screen on clicking on push notification for flutter

Chrome DevTools previously offered a setting to show rulers when inspecting elements. It had a pixel ruler at the sides of the view, and boundary lines for each element extending the full view of the page. 

It used to be found (as I recall) in &quot;DevTools Settings / General&quot;. There no longer is a General section, and I don&#39;t see it in &quot;DevTools Settings / Appearance&quot;. Has this been moved, or removed? I&#39;m not finding documentation or discussion of it. 

How to enable view of rulers in Chrome DevTools?

<p>Chrome DevTools previously offered a setting to show rulers when inspecting elements. It had a pixel ruler at the sides of the view, and boundary lines for each element extending the full view of the page.</p>
<p>It used to be found (as I recall) in "DevTools Settings / General". There no longer is a General section, and I don't see it in "DevTools Settings / Appearance". Has this been moved, or removed? I'm not finding documentation or discussion of it.</p>


Sendkeys not working. Please help me to resolve this..

    WebElement username = driver.findElement(By.xpath(&quot;//*[@id=&#39;username&#39;]&quot;));		
    username.sendKeys(&quot;123456&quot;);

Console:


    Exception in thread &quot;main&quot; org.openqa.selenium.WebDriverException: unknown error: call function result missing &#39;value&#39;
    
      (Session info: chrome=65.0.3325.31)
      (Driver info: chromedriver=2.33.506120 (e3e53437346286c0bc2d2dc9aa4915ba81d9023f),platform=Windows NT 6.1.7601 SP1 x86) 
    (WARNING: The server did not provide any stacktrace information)
    Command duration or timeout: 0 milliseconds
    
    Build info: version: &#39;3.8.1&#39;, revision: &#39;6e95a6684b&#39;, time: &#39;2017-12-01T19:05:32.194Z&#39;
    System info: host: &#39;NEW-PC&#39;, ip: &#39;192.168.0.103&#39;, os.name: &#39;Windows 7&#39;, os.arch: &#39;x86&#39;, os.version: &#39;6.1&#39;, java.version: &#39;1.8.0_161&#39;

Driver info: 

    org.openqa.selenium.chrome.ChromeDriver
    
    Capabilities {acceptSslCerts: true, applicationCacheEnabled: false, browserConnectionEnabled: false, browserName: chrome, chrome: {chromedriverVersion: 2.33.506120 (e3e53437346286..., userDataDir: C:\Users\NEW\AppData\Local\...}, cssSelectorsEnabled: true, databaseEnabled: false, handlesAlerts: true, hasTouchScreen: false, javascriptEnabled: true, locationContextEnabled: true, mobileEmulationEnabled: false, nativeEvents: true, networkConnectionEnabled: false, pageLoadStrategy: normal, platform: XP, platformName: XP, rotatable: false, setWindowRect: true, takesHeapSnapshot: true, takesScreenshot: true, unexpectedAlertBehaviour: , unhandledPromptBehavior: , version: 65.0.3325.31, webStorageEnabled: true}



org.openqa.selenium.WebDriverException: unknown error: call function result missing &#39;value&#39;

I upgraded Google Chrome to `Version 64.0.3282.140 (Official Build) (64-bit)` on a Windows 10 machine. Once I did, I am getting this error on my site within the developer tools console. Not real sure where to start. I did see a similar issue last year that was an issue with youtube (also in the url), but I haven&#39;t seen any solutions. 


    
    Error parsing header X-XSS-Protection: 1; mode=block; 
    report=https://www.google.com/appserve/security-bugs/log/youtube: insecure 
    reporting URL for secure page at character position 22. The default 
    protections will be applied.
    16:07:31.905

I&#39;m also seeing the issue when I go directly to youtube via the embedded url so it&#39;s not just on my site. 

UPDATE 

I&#39;ve attached a photo of the headers in the response that indicate the google.com url that appears to be generating the issue. 

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/QsvVy.png

Error parsing header X-XSS-Protection - Google Chrome

I am getting the below error while sending keys.

Result Message:

    System.InvalidOperationException : unknown error: call function result missing &#39;value&#39;
      (Session info: chrome=65.0.3325.146)
      (Driver info: chromedriver=2.33.506120 (e3e53437346286c0bc2d2dc9aa4915ba81d9023f),platform=Windows NT 10.0.14393 x86_64)

I have updated the chrome driver to 2.36 but still my code search for 2.33?

Any idea ?

unknown error: call function result missing &#39;value&#39; for Selenium Send Keys even after chromedriver upgrade

About two months ago we started using Rollbar to notify us of various errors in our Web App. Ever since then we have been getting the occasional error:

`ResizeObserver loop limit exceeded`

The thing that confuses me about this is that we are not using `ResizeObserver` and I have investigated the only plugin which I thought could possibly be the culprit, namely:

[Aurelia Resize][1]

But it doesn&#39;t appear to be using `ResizeObserver` either.

What is also confusing is that these error messages have been occuring since January but `ResizeObserver` support has only recently been added to Chrome 65.

The browser versions that have been giving us this error are:

 - Chrome: 63.0.3239 (ResizeObserver loop limit exceeded)
 - Chrome: 64.0.3282 (ResizeObserver loop limit exceeded)
 - Edge: 14.14393 (SecurityError)
 - Edge: 15.15063 (SecurityError)

So I was wondering if this could possibly be a browser bug? Or perhaps an error that actually has nothing to do with `ResizeObserver`?

  [1]: https://www.npmjs.com/package/aurelia-resize

ResizeObserver - loop limit exceeded

I&#39;m getting the error message..

&gt; Uncaught (in promise) DOMException: play() failed because the user didn&#39;t interact with the document first.

..when trying to play video on desktop using Chrome version 66.

I did find an ad that began playback automatically on a website however using the following HTML:

    &lt;video
        title=&quot;Advertisement&quot;
        webkit-playsinline=&quot;true&quot;
        playsinline=&quot;true&quot;
        style=&quot;background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;&quot;
        src=&quot;http://ds.serving-sys.com/BurstingRes/Site-2500/Type-16/1ff26f6a-aa27-4b30-a264-df2173c79623.mp4&quot;
        autoplay=&quot;&quot;&gt;&lt;/video&gt;

So is by-passing Chrome v66&#39;s autoplay blocker really as easy as just adding the `webkit-playsinline=&quot;true&quot;`, `playsinline=&quot;true&quot;`, and `autoplay=&quot;&quot;` attributes to the `&lt;video&gt;` element? Are there any negative consequences to this?

How to handle &quot;Uncaught (in promise) DOMException: play() failed because the user didn&#39;t interact with the document first.&quot; on Desktop with Chrome 66?

In the Chrome browser&#39;s developer tools, there are various ways to throttle your network connection to emulate different connection types.

Those menus for selecting a connection type used to show the speeds and latency that would be used to simulate each connection type.  
[![Throttling menu with informative labels][1]][1]

Now, as of at least Chrome 64, the useful information about speed and latency has been removed.  
[![Throttling menu with uninformative labels][2]][2]

  [1]: https://i.stack.imgur.com/aHe7X.png
  [2]: https://i.stack.imgur.com/U6QuC.png

I tried duplicating the numbers from the first image for Regular 3G and Good 3G in my own custom profiles to see if they matched the Slow 3G and Fast 3G presets from the first image but I got significantly different results for the DOMContentLoaded and Load event times between the presets and my custom profiles.

What does Fast 3G actually mean?

I&#39;ve created a tool in JavaScript that determines the current UTC time and checks if another predetermined date has passed yet. 

I&#39;d like to change my browser to another timezone and see if the tests still pass but I&#39;m having trouble finding a way to do this. 

Is there a way to do this in Chrome dev tools? If not, do any other suggestions come to mind?

Is there a way to change your timezone in Chrome devtools?

This was working fine up until yesterday. Now when I connect my Android device for USB Debuggers. Chrome is no longer display my app. 

Now the popup window shows HTTP/1.1 404 Not Found.

Looks to be connecting fine and the app runs fine on my Mobile Device.

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/3OthL.png

Google Chrome Developer Tools : Android Debugging returns HTTP/1.1 404 Not Found. Why?

When I run a new page, I must specify size of the viewport using the `setViewport` function:

	await page.setViewport({
		width: 1920,
		height: 1080
	})

I want use max viewport.

How can I make the viewport resizable according to the window size?

How to set max viewport in Puppeteer?

I have the following error in the Chrome Dev Tools console on every page-load of my Node/Express/React application:

&gt; Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist

This error makes a reference to localhost/:1. When I hover over this, it shows http://localhost:3000/, the address I&#39;m viewing the app at in the browser.

Anyone have an idea what is going on? Most of the other threads I&#39;ve found that bring up this error seem to be related to someone trying to develop a Chrome Extension, and even then they tend to have very few responses.



Content Type	Original Author	Original Content on Stackoverflow
Question	2540625	View Question on Stackoverflow
Solution 1 - Google Chrome	Gideon Pyzer	View Answer on Stackoverflow
Solution 2 - Google Chrome	Kayce Basques	View Answer on Stackoverflow
Solution 3 - Google Chrome	Hanan Fadel	View Answer on Stackoverflow
Solution 4 - Google Chrome	Amir Reza	View Answer on Stackoverflow

How to enable view of rulers in Chrome DevTools?

Google Chrome Problem Overview

Google Chrome Solutions

Solution 1 - Google Chrome

Solution 2 - Google Chrome

Solution 3 - Google Chrome

Solution 4 - Google Chrome

how to open particular screen on clicking on push notification for flutter

Flutter apps are too big in size

Attributions