Amongst the bevy of features in the latest Kendo UI release, we introduced a new tool specifically for Kendo UI developers; the Kendo UI Chrome Inspector. We’ve been working on this tool for a while internally, using it ourselves as we build the next releases of Kendo UI. We realized it would probably be a huge benefit to all Kendo UI developers, so we have officially released it to the Chrome WebStore.
The Chrome DevTools are the industry standard for debugging web applications. I’m not trying to troll your favorite browser, so you shouldn’t read that as “Chrome is the greatest”. The Chrome team continues to do a brilliant job pointing out all of the neat tricks and feats that the developer tools are capable of. Some people develop entirely inside of the Chrome DevTools. I’m not as hip as Remy, but I do love me some DevTools and I really love me some Kendo UI.
That’s how we talk here in the south – don’t judge me.
I reached out to the primary developer on the Kendo UI DevTools to bring you a complete list of features, tricks, tips and hacks. Let’s get to know the Kendo UI Chrome Inspector
The extension creates a new Kendo UI tab in your DevTools. If Kendo UI is in use on a particular page, it will shell out the version to the console.
Version numbers prior to Q2 2013 will not be written to the console. We didn’t start including the meta data to let the extension know what the current version was until that release.
The Kendo UI Chrome Inspector Tab has three different sections. The one where you will spend most of your time is the “Widget List” tab.
This tab lists all of the Kendo UI widgets that are being used on the current page. The right pane holds all of the information about the widget instance, including the original element that was used to create the widget and the wrapper that was created around the original element, if applicable, as well as the DataSource and Event Log.
Clicking on one of these items like ‘element’ or ‘wrapper’ takes you to the actual item in the “Elements” tab.
The options object is searchable with a little textbox that hovers over the “options” object. Typing in the box will filter down to matching configuration options.
Clicking a particular option will open it’s corresponding documentation page.
The Data Source Pane shows the DataSource for the widget if it has one. The options for the DataSource are displayed alongside the data within the DataSource.
The items in the
data option can be edited and the changes will be reflected in real time.
All events executed by the widget will show up here. You can expand any event to see the arguments. If any of the arguments are DOM elements, you can click on that element to select it in the “Elements” tab.
In any of the panes on the right-hand side, you can right click on the toggle arrows to expand all the subgroups.
While you can view the events for a specific widget on the “Widget list” tab, the “Events” tab shows all events being fired by all widgets on the page.
As with any of the list items, you can click through to DOM elements and right-click to do deep expansion on nodes.
The diagnostics tab serves as a place to troubleshoot common errors with your Kendo UI setup, as well as checking your code for errors.
Often we make silly mistakes when setting up Kendo UI. This includes things like forgetting a stylesheet, getting styles out of order, or simply making a typo in a script or stylesheet include. This can be incredibly hard to troubleshoot since the browser just fails silently. The Kendo UI Chrome Inspector knows all about common errors and will let you know if something seems afoul in your setup.
You can click on the error location and get a popup window showing you the offending line of code.
Here are some additional items that I was able to dig up from the developer that you may or may not have figured out yet.
If you develop often with Chrome, then you may be familiar with the process of selecting a widget using “Inspect Element” and then jumping to the console to get the widget instance by typing something like…
var ddl = $($0).data('kendoDropDownList');
$0 is a global reference to the selected element. The Kendo UI Chrome Inspector adds a ‘$K’ variable that gets the widget instance for you automatically. Just select the element and then drop into the console and type $K
Also, when you do “Inspect Element” on a widget, that widget is highlighted in the Kendo UI Chrome Inspector Widget list tab; even if you didn’t inspect the root element on which the widget was intialized. This way you can find your Kendo UI widgets faster.
Often you want to select an element in the page and get it’s widget instance. You can right-click any element and do “Inspect Element”. This you probably already know. But once you do that, you can access the widget instance from the $K global variable in the console.