Some browsers have a Pretty print button that looks like this {} and it appears for HTML, JS, and/or CSS depending on the browser. Chrome has it in the in the Sources tab: Firefox has it in the in the Debugger tab : The position of these buttons may change, but it should always be … Read more
In XPath, // and .// are both syntactic abbreviations: // is short for /descendant-or-self::node()/ .// is short for self::node()/descendant-or-self::node()/ The descendant-or-self axis contains the context node and all descendents of the context node. So the difference between // and .// reduces to a difference in context nodes. For //, the context node is the root … Read more
Why is Lighthouse showing much longer load times? The answer is a combination of simulated network throttling and CPU throttling. Simulated Network Throttling When you run an audit it applies 150ms latency to each request and also limits download speed to 1.6 Megabits (200 kilobytes) per second and upload to 750 megabits (94 kilobytes) per … Read more
Yes, In recent updates of Chrome 84, Find feature is buggy. 3 issues have been reported and those are in unconfirmed status as of now (while writing this answer). You can follow them on below links for more details – An element in the elements tab is not highlighted if it is only one in … Read more
The answer, for now, is no. The [[FunctionLocation]] property you see in Inspector is added in V8Debugger::internalProperties() in the debugger’s C++ code, which uses another C++ function V8Debugger::functionLocation() to gather information about the function. functionLocation() then uses a number of V8-specific C++ APIs such as v8::Function::GetScriptLineNumber() and GetScriptColumnNumber() to find out the exact information. All … Read more
How to debug with angular/cli The new angular/cli version uses webpack which does not compile the ts files to an local directory like dist before (till beta 1.0.0-beta.10). Now it uses some memory like approach. But you can find the ts Files in the Chrome Developer Tools in the “Sources” tab. (new) Solution for angular/cli@1.0.0-beta.26 … Read more
Support for Custom.css has been removed from Chrome in version 32. This answer provides two methods for easily activating style sheets in the developer tools. The second method is recommended, but only works for Chrome 33+, the first method also works for Chrome 32. Both methods are Chrome extensions, to use the examples below, follow … Read more
Chrome 29–56, and possibly beyond Finally (maybe already with version 28), it’s simple. Just click on view source next to Form Data: Also, at least in version 56, post data may be found in the Headers tab, under Request Payload. Older versions Chrome 27 Right click in the Name/Path panel in the Network tab. Select: … Read more
This is a special indicator that a Shadow DOM exists. These have existed for years, but developers have never been given APIs into it until recently. Chrome has had this functionality for a while, other browsers are still catching up. It can be toggled in the DevTools Settings under the “Elements” section. Uncheck the “Show … Read more
Google gives a breakdown of these fields in the Evaluating network performance section of their DevTools documentation. Excerpt from Resource network timing: Stalled/Blocking Time the request spent waiting before it could be sent. This time is inclusive of any time spent in proxy negotiation. Additionally, this time will include when the browser is waiting for … Read more