Say Hello To The Kendo UI Chrome Inspector

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

Version In Console

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.

kendo-ui-version

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.

Kendo UI Tab

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.

Widgets List

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.

Widget Pane

right-panel

Clicking on one of these items like ‘element’ or ‘wrapper’ takes you to the actual item in the “Elements” tab.

kendo-ui-to-elements

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.

auto-complete

Clicking a particular option will open it’s corresponding documentation page.

Data Source Pane

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.

datasource

The items in the data option can be edited and the changes will be reflected in real time.

update-datasource

Events Pane

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.

events

Right-Click To Expand All

In any of the panes on the right-hand side, you can right click on the toggle arrows to expand all the subgroups.

ScreenFlow (7)

Events Tab

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.

events-tab

As with any of the list items, you can click through to DOM elements and right-click to do deep expansion on nodes.

Diagnostics Tab

The diagnostics tab serves as a place to troubleshoot common errors with your Kendo UI setup, as well as checking your code for errors.

Kendo UI Styles and Scripts

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.

Kendo Linter

Linting means checking your code for errors. The Kendo Linter will traverse your JavaScript code and tell you if you have any mistakes.

kendo-linter

You can click on the error location and get a popup window showing you the offending line of code.

Additional Tricks

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.

$K Global Widget Instance

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');

The $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

k-global-variable

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.

Work Smarter

Working with JavaScript can be frustrating at times due to the lack of good debugging tools. The tools are getting much better though. Even if you are working with minified code, the Kendo UI Chrome Inspector can save you valuable time so you can get back to playing Titanfall or yelling at your XBox One to “WATCH ESPN!!!”

BuildFree_Blog_banner

Comments