google-chrome-devtools

As of a few days ago, whenever I open the developer tools in Chrome on OSX the 'drawer' automatically opens - 2nd screen shot The icon in blue shows/hides the drawer (now defaults to on) - First screen shot This is so annoying and I cant figure out a way to stop this behaviour. It never did this before.... This was annoying me to no end and I could never figure out why it was automatically opening. Apparently the fix, at least in my case, is that I went into the Emulation tab inside of the drawer and disabled any of the overrides. Everything in blue is highlighted as an override. Disabling

Some semi-recent update to Chrome now places an overlay on my webpage when paused at a breakpoint. I'm specifically trying to view the state of my page markup at this point, and the overlay is hiding exactly what I want to see! Is there a way to turn off this markup? Or is there a way to revert Chrome to a version that doesn't have this mis-feature? István Ujj-Mészáros Now there is an option in Inspector's settings, just uncheck Disable paused state overlay . It is very usable with the setTimeout(function(){debugger;}, 5000); trick to inspect elements that are visible only on hover. I've run

I would like to know the best way to detect when a method or function is directly called through the console. As far as I currently understand, it's not possible to directly detect it on identical function calls, but using the .call() and .apply() methods of a function I can pass additional data through the this object. Given the following code structure: (function(){ var Player = {money: 0}; window.giveMoney = function(amount){ if (this.legit !== true) throw new Error("Don't try to cheat!"); Player.money += amount; } })(); I could call the function using window.giveMoney.call({legit: true},

In our project, there is a different functionality when one Dollar sign used $() in Chrome console vs two Dollar signs $$(), besides the known difference that $$() return an array an $() return the first element. For example, selector for specific element, with one dollar and two dollar queries: $$(".my-class[my-attribute='trump']") //works $('.my-class[my-attribute=sanders]') //works $$('.my-class[my-attribute=trump]') //not work What is the source and explanation for this behavior? Denys Séguret From Chrome Developer Tools documentation : Selecting Elements There are a few shortcuts for

I need to emulate an iPhone X on Chrome. I have found the info below: Height: 5.65 inches (143.6 mm) Width: 2.79 inches (70.9 mm) Can you tell me which values should I give to the form below? iPhone X sepecifications This is what Device pixel ratio (DPR) is If you want to emulate a Retina device from a non-Retina machine or vice versa, adjust the Device pixel ratio. The device pixel ratio (DPR) is the ratio between logical pixels and physical pixels. Devices with Retina displays, such as the Nexus 6P, have higher pixel density than standard devices, which can affect the sharpness and size of