Menu
Ever since a couple of weeks ago I have encountered crashes with the Chrome Developer Tools. Whenever inspecting an element on the page I get the "Aw, Snap!" Error page, and a message on the devTools panel say "DevTools was disconnected from the page". After reading This post I have managed to isolate the css file that is causing the error. It turns out to be a kendo-ui css file /Content/kendo/2015.2.902/kendo.silver.min.css. When commenting out the file, the devTools works fine and I can inspect the elements.
I ran this file in CSS Validator and it gave me 6 errors (like Unknown pseudo-element or pseudo-class ::selection [selection] and Too many values or values are not recognized : inset 0 0 0 1px inset 0 0 3px 1px #bebec3) and 116 warning (like Property none,-webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, 0.45)),to(rgba(255, 255, 255, 0))) is an unknown vendor extension and Property -webkit-box-shadow is an unknown vendor extension)
I have several projects working with kendo-ui, and removing them is not an option nor modify the css files of kendo, and I also don't want to stop working with the beloved Chrome devTools.
My Chrome version is 48.0.2564.103 m.
I have tried tweaking the settings of the devTools, maybe make it less strict but no luck.
Any ideas how to resolve this?
Update 1
I gave it a try and modified the kendo.silver.min.css file and removed all the errors found at the css-validator (still have 115 warnings, but removing them is the same as not loading the file at all). The css validation turns ok. Running the application again with the modified file gave no results, and the devtools keeps crushing when inspecting an element. It seems to be crushing when inspecting an element that is a child of a Kendo control such as grid, tab strip etc, but not for standalone elements even if they have a k-... css classes.
This issue can be reproduced at the kendo ui demos site itsef. When right clicking on one of the buttons in the grid and trying to Inspect it.
945
It seems to be crushing when inspecting an element that is a child of a Kendo control such as grid, tab strip etc, but not for standalone elements even if they have a k-... css classes. This issue can be reproduced at the kendo ui demos site itsef. When right clicking on one of the buttons in the grid and trying to Inspect it.
Open the DOM panel of the Chrome DevTools and follow the steps as mentioned below to check a web element: First, click on the “Select element” button in the top left corner of the DOM panel (as highlighted by marker 1 in the following screenshot). After that, you can click on the element you want to inspect; the element will highlight.
Before exploring the Inspect Element tool in Google Chrome, it’s essential to know about the Developers Tools. It is a panel that comes with the Inspect Tool, and it comprises three main parts: Elements/Document Object Model (DOM) panel – contains the page’s DOM tree and provides access to the Hyper Text Markup Language (HTML) source code.
Open Google Chrome and go to a website. Here, we use hostinger.com. Right-click on any part of the web page and select Inspect. Enable the Inspect feature and click on the element you want to hide. Right-click on the code highlighted on the DOM tree and select Hide Element. A new visibility property will appear on the CSS panel.
It is known issue in current chrome stable version (48). It was fixed and merged to chrome 49. Please use beta before Chrome 49 will become stable.
54
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
