Questions tagged [google-chrome-devtools]

Chrome DevTools are the web developer tools built into Google Chrome.

Google Chrome DevTools is a set of developer tools included with the Google Chrome browser. It includes inspection, debugging, and profiling capabilities for web pages and web apps.

Chrome Developer Tools features include:

  • Device Mode: emulates various screen sizes
  • Elements Panel: HTML/CSS analysis
  • Console Panel: command line and diagostics
  • Sources Panel: debugger
  • Network Panel: page load performance
  • Performance Panel: runtime performance
  • Memory Panel: memory issues
  • Application Panel: resource monitor
  • Security Panel: security issues

Useful Links:

8740 questions
6
votes
3 answers

Developer tool similar to Firefox's Style Editor for Chrome

Does chrome have a debugging / editing mode were you can amend the css style sheet in the same way that you can in Firefox by going to Tools > Developer Tools > Style Editor. This isn't the same as the styles tab in the left hand side of the…
sam
  • 9,486
  • 36
  • 109
  • 160
6
votes
2 answers

Is there a way to view chrome.storage.local in Developer Tools?

I have a Chrome Extension and I'm able to view background page localStorage on the Resources tab of Developer Tools. Is there a way to do the same for chrome.storage.local?
DanielG
  • 2,237
  • 1
  • 19
  • 19
6
votes
3 answers

Copying CSS from devtools copies spaces

My workflow for CSS often includes that I tingle around in devtools, add/change CSS in the browser and when the values fit my needs I copy the CSS and paste it in my .scss-file. Now since a while my copied CSS includes spaces for formatting. CSS in…
MMachinegun
  • 3,044
  • 2
  • 27
  • 44
6
votes
2 answers

JavaScript profiling with per-statement results

I've got a highly recursive JavaScript function, which calls no other JavaScript functions. It's just the one function calling itself doing some simple logic and calling system functions (Array.slice, Array.splice , Array.push, etc.). And I'm trying…
6
votes
1 answer

Why can't I view __proto__ upon object creation?

When I create a blank object: var o = {}; Why can't I view the '__proto __' object when I create a new object, but I can when I add a function? Edit: For completeness, to create a truly blank object (no prototypal linkage), we could do: var o =…
Data
  • 1,337
  • 11
  • 17
6
votes
3 answers

debugging webgl in chrome

I have a webgl page running in chrome. Every now and then chrome will report the following error. [.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to render with no buffer attached to enabled attribute 1 I've tried to…
6
votes
1 answer

How can I simulate the back button on a samsung device using chrome?

I am using chrome devtools to debug a site running on an android device. In an android device you usually have the "menu" button and the "back" button. How can I emulate a key press to one of these keys using chrome devtools?
Tiagojdferreira
  • 1,122
  • 2
  • 14
  • 20
6
votes
0 answers

Multiple detached webview instances seen in chrome devices when opening and closing the cordova android app

Every time I open and close up the cordova app again on my Android phone I see multiple detached webviews in chrome devices. What do these detached webviews mean? Is this like a leak or something? Is there a way to recover the detached webviews? The…
aloks
  • 61
  • 5
6
votes
2 answers

How to debug Crosswalk webview remotely?

I'm trying to use XWalkView in Android 5. When I try to inspect an XWalkView in chrome://inspect, I can see the name of the app that is running, but no options for inspection. I also attempted in Canary, but it never got past USB auth for debug. How…
6
votes
0 answers

Can't figure out what is causing this unending Recalculate Style loop

A client sent me an email saying that he noticed his computer was sluggish, and when he ran diagnostics he determined the cause was that his webpage was using up a bunch of CPU. In trying to debug why his site might be using so much CPU on his…
Josh Burson
  • 559
  • 4
  • 17
6
votes
1 answer

Open Chrome Developer Tools tabs in a new window to show on multiple monitors

Is there a way where one can open a specific tab of the Chrome Developer Tools in a separate window? I have got 3 monitors and would like to have the Sources tab on one screen and the Elements on another screen. Is this possible?
Mark Cassar
  • 1,842
  • 4
  • 20
  • 27
6
votes
0 answers

Chrome Debugger: Unused variables not loaded in a JavaScript Closure

Not a problem, because I found out what causes it, but a huge quirk nevertheless: Apparently when you create a closure, the JavaScript engine does not save all of its scope variables. It saves only the ones that are really used by the inner…
Jencel
  • 722
  • 7
  • 17
6
votes
2 answers

Chrome dev - Cannot assign to read only property

I'm building an app using AngularJS, MongoDB and NodeJS. My app uses the Mongolab REST API for CRUD operations. I'm also using Google Chrome Developer Tools for debugging. Until today, my Update operations on mongo were working fine on both Chrome…
6
votes
0 answers

How can I recover a lost chrome devtools window with an unsaved snippet?

I had a devtools window open with a lengthy snippet (unsaved) in the sources. Somewhere between tabbing around and adjusting window size to test responsiveness, I lost the window I was working in. The window must still open somewhere because when I…
6
votes
1 answer

Chrome Extension: webRequest Redirect to Existing Tab, Without Opening New Tab

When a user opens a certain page, I want to open that page in an existing tab, before a new tab is opened. I've tried with webRequest: chrome.webRequest.onBeforeRequest.addListener( function(details) { chrome.tabs.query({ url:…