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

  • Arindam Biswas

    Awesome. This might be a given, but the Kendo UI Chrome Inspector works with angular-kendo as well.

    • burkeholland

      I had not tried it, but it would make sense I suppose since the directives are just widgets post-parse. It’s good to know that the timing of creation doesn’t affect it.

    • burkeholland

      I had not tried it, but it would make sense I suppose since the directives are just widgets post-parse. It’s good to know that the timing of creation doesn’t affect it.

  • Dorian Boršo

    Hmm… I’m kinda confused on the event log. I don’t know if it just doesn’t work or is there something I must turn on somewhere for it to work?

    • burkeholland

      Interesting. It should just start picking up events right away. What’s your browser version?

      • Dorian Boršo

        For some reason it works now on one of the projects but not on the others.

        As for the version: Version 35.0.1916.153 m

        • burkeholland

          That’s really odd. If it’s a public project, let us know and we can troubleshoot it directly. This happens to me still on occasion, but I can’t seem to nail down why.

          • Dorian Boršo

            Sadly it’s not publicly available. Still trying to get a handle on it since the same code sometimes works and sometimes not. I am at a complete loss here – as I said it must be some sort of magic at work 😀

            Generally I can live without it but it’s a great tool to keep track of events and as such locating problematic parts of code much quicker and more efficiently (since error reporting in kendo can sometimes be really ambiguous and this tool made my job much easier to say the least :P)

        • burkeholland

          That’s really odd. If it’s a public project, let us know and we can troubleshoot it directly. This happens to me still on occasion, but I can’t seem to nail down why.

      • Guest

        To make matters even weirder today the projects that didn’t work now detect kendo whilst for those that did work before, do not at this moment. God know’s what kind of sorcery my Chrome is practicing :/

  • Pingback: The Case for Kendo UI -Telerik Developer Network()

  • Abdul Quddos

    We are using Kendo UI with backbone.js and marionette.js but this tool is not working for us it detected the Version in console as following
    Detected Kendo UI version: “2014.1.416”

    But under Keno UI tab is has following message:
    Kendo UI is not used in this page.

    • Jacques Mathieu

      I am having the same issue. have you figured this out yet? Anyone? I’m using Sails.js and MongoDB

      • Abdul

        Currently we are using kendo UI 2015.1.429 and this chrome extension working as expected.

  • Jacques Mathieu

    Kakk

  • Pingback: 16 Ways to Search, Find and Edit with Chrome DevTools -Telerik Developer Network()

  • John Welty

    Are there any plans to build extensions for Microsoft Edge development tools as an alternative to Chrome?