timstuyckens/chromeextensions-knockoutjs

The source code for the chrome dev tools extension that allows you to easily debug knockout js apps.

chromeextensions-knockoutjs

The source code for the chrome dev tools extension that allows you to easily debug knockout js apps.

Extension in Chrome App Store: https://chrome.google.com/webstore/detail/knockoutjs-context-debugg/oddcpmchholgcjgjdnfjmildmlielhof

See the context in the sidebar of the elements panel

Trace any change of your viewmodel with the knockout panel

You can also edit viewmodel values: https://github.com/timstuyckens/chromeextensions-knockoutjs/wiki/Editing-viewmodel-binding-values

chromeextensions-knockoutjs's Issues

loading knockout with require causes requirejs.onError to fire

If there is no window.ko defined then the extension tries to load it via require.

The way it tries to load it is first to try 'ko' then 'knockout' using a try catch block. In my scenario I use requirejs.onError to catch and log unexpected errors.

It took me sometime to realise what was generating the loading errors for module 'ko'. It would be nicer if you could detect if the module is loaded using window.require.defined (this is what requirejs provides to test loaded dependences I don't know what other AMD loaders use).

No info displayed - always message "Please select a dom node with ko data."

If you have viewmodels with a sort of base class like

var baseViewModel=function(){
     var self=this;
     self.awesomeProperty=ko.observable("");

     return self;
};

and a concrete viewmodel that uses that base class like

var featurViewModel=function(){
        var self=baseViewModel();
        self.featureProperty=ko.observable("");

       return self;
}

the $root variable in of the knockout context is the global window object. Doing ko.toJS(context.$root) will crash

Excessive memory usage.

Hi.

I have noticed that when i do enable the knockout debugger, the memory consumption goes bananas..
An application that consumes max 60Mb of memory with the knockout debugger enabled it consumes from 200Mb and more..

Do you have any ideas.
I can't share my code as it is a secure portal.

Fix warning console.markTimeline is deprecated.

Chrome Canary 32.0.1658.0 - model properties appear with quotes

In the latest version of Chrome (Version 32.0.1658.0 canary Aura), the Knockout Context list is displaying the view model items incorrectly. They display like: " FirstName": "name" " LastName": "last" etc. The property name is surrounded with quote marks, and it leads with a quote and a space. Properties within a class do not have the quote marks around them.

Port to use with Aurelia

Hello @timstuyckens -

I would like to port this extension to work with Aurelia but before I did I wanted to see if you would be interested in contributing as well or would prefer for me not to.

Thanks in advance.

Outdated manifest version

For any element I see only the $root bindings

No matter which element I inspect, the knockout tab always shows the same list of observables from $root for the page. When the page loads dynamic content the tab stays the same. It always says the $parents array is empty, even when I inspect an element that is nested several context layers deep.

KO Tab doesn't show in incognito window

tx for the awesome extension, works a treat in normal browsing mode!

I've got 'Allow in incognito' selected in Chrome options, but don't get the KO tab appearing in the Elements pane of devtools (but the same page works fine in normal browsing mode).

I usually develop in incognito to prevent my hordes of extensions from bogging down the page (I'm looking at you: Evernote web clipper)

Not a dealbreaker by any stretch, just letting you know - tx again!

OSX 10.9.3, Chrome 35.0.1916.114 (incognito only!)

get All context data as JSON format

How to get All context data as JSON format?

I'm searching a value in somewhere in context. Need to find it easly.

Remove jQuery dependency

If you have a jsFiddle example that you want to debug and only included knockout the extension doens't work.

Doesn't work in chrome Version 31.0.1612.1

I updated the chrome recently and realized that the extension doesn't work anymore. More specifically, it doesn't appear in the side panel; that's maybe due to the changes the made to the side panel of the Elements tab.

easy way to edit data binded properties

Updating from ko 3.4.0 to 3.5.1 causes 99% CPU usage + freeze.

First off I'd like to say that I LOVE this extension, to the point that I couldn't imagine developing knockout code without it.

Using the knockoutjs context debugger I'm running into a problem where the knockout extension is slowing the page down drastically, until the tab shows as using 99% CPU in chrome's Tab Task Manager.

Unfortunately I don't have a great amount of information, but due to JQuery popping up on my performance profile with a ton of knockout functions I think that the problem is a fight between JQuery and knockout (causing something like an infinite loop). For reference my site doesn't use jquery.

I've tried disabling serialisation, and it did not affect the issue. Everything runs smoothly when I disable the extension.

There should be a way to refresh "Knockout context" panel automaticaly when model/context is changed

There is the only way that I know is switching between panels (e.g. "Knockout context" <=> "Properties"). But when I switch between them I face another issue - context is collapsed.

Not working on Chrome 46

Hi,
No tracing is observed when used in Chrome 46; The knockout context does show under the 'elements' panel, but obviously this doesn't show any data change.

Thanks

Stephen

Need a method to attach for Ajax debugging.

My pages run a knockout on load and retrieve ajax data. By the time i can bind, the scripts have run. Maybe a way to call the binding enable within the code (or documented method better explained in the panel)

Performance issue after upgrade to chrome (39.0.2171.71)

Chrome takes about 840 gb of memory on my page then I turn on the extention.

Proper documentation on how to use?

I looked at the page on Chrome Web Store, and while there are praises and critiques that contain some specific detail, there is not real documentation.

I was happy to find this Github page, only to find that the root-level README.md at https://github.com/timstuyckens/chromeextensions-knockoutjs/blob/master/README.md is a stub.

Could the root-level README.md at https://github.com/timstuyckens/chromeextensions-knockoutjs/blob/master/README.md be expanded to proper documentation on how to use Knockout context debugger, or possibly have a link to real documentation deeper in the Github project heirarchy?

Thanks,

wrong info message when selection DOM node without knockout context

info: "Please select a dom node with ko data." for every node

Tracing works beautifully for me. Unfortunately, no matter what node I select in the webapp I'm developing, all I get in the knockout context panel is 'info: "Please select a dom node with ko data."'

I've never debugged an extension before. I was able to pull up this extension in a separate devtools window and find the source, but I have not yet been able to get a breakpoint to trigger.

Following the advice in issue #8, I tried selecting a node and executing 'ko.dataFor($0)' which did return a valid object.

This is most likely an issue specific to my setup as the context panel works fine with the knockout.js examples.

What else can I try?

ko not found in webpack project

I'm bundling knockout with webpack. Like issue #6 I get the error: knockout.js is not used in the page (ko is undefined). Maybe you are using iFrames, if so, browse to the url of the frame and try again.
I've tried (this is typescript) in my entry point:

(<any>window).ko = ko;

Incompatible with knockout repeating binding

Hi,

Great tool - I've started exploring its use but ran into an issue. The knockout repeat binding handler (https://github.com/mbest/knockout-repeat) doesn't play nice with this extension. It's not either side's fault - just a tricky corner case :)

I've done a bit of digging in the code and found the issue.
https://github.com/timstuyckens/chromeextensions-knockoutjs/blob/master/pages/js/devtools.js#L53

On line 53 there's a check to see if the property being read is called $index. The repeat binding handler, by default, creates a variable in knockout's binding context called $index to indicate what index you're up to when repeating. However it's not a function so the following line
https://github.com/timstuyckens/chromeextensions-knockoutjs/blob/master/pages/js/devtools.js#L54
crashes.

I fixed it temporarily in the Chrome debugger by amending the if statement to also check to see if $index is a function.

Another fix can be made in my own code using the repeat binding.
Instead of

That means it will no longer create a variable in the binding context called $index.

As an aside, when the display is working properly using either of the fixes above it's then tricky to explore the contents of $arrayItem since it's just displayed as a function. The only way I've found to explore its contents is to right-click it and put it in the console as a variable (which will be a function) and then execute that variable/function in the console. Is this the best approach? Is there some way this extension could invoke such functions and display them reliably?

KO is undefined while using ECMA imports

Hello!

I have a knockout SPA with es6/ECMA module imports (basically all modules have import ko from "knockout"), no window.ko available.
Because of this, I suspect knockout is not found by an extension scripts (first of its pages/js/devtools.js) since they rely on availability of ko solely in global namespace:

var ko = window.ko;

Inspecting through chromium (v107.0.5304.87) devTools of any knockout component with document-wide applied bindings results in:

knockout.js is not used in the page (ko is undefined). Maybe you are using iFrames, if so, browse to the url of the frame and try again.

I understand that I could just throw in ko into global namespace under window. but it does not seem as any good practice.

Are there any plans on supporting this type of modular imports?
Thank you.

Enable auto tracing

As we talked about, i would like to being able to auto trace(on the tracing page) all observables, so i dont have to start tracing every time I reload the page i'm working on.

If its not possible, then perhaps a programmatically way to start tracing (like putting some code next to the part where I use applybindings

Does it work with RequireJS?

I tried your plugin and verified that it works fine on the knockout website's live examples but it doesn't work with my project.

My current project uses Knockout (obviously), RequireJS, CoffeeScript and a custom Templating engine i have written (that allows templates to be loaded as text by RequireJS). I think one of those three may be preventing your plugin from parsing my view models but am not sure which.

Does the plugin look for a script tag that contains a view model? if so i reckon that might explain why it cannot find my viewmodels as they are all loaded as dependencies with RequrieJS.

I don't think the issue would be CoffeeScript because by the time the browser sees my code it is already compiled into JS (by RequireJS).

Perhaps my non standard templating engine is causing issues, although all it does it centralise where templates can be found:

templateEngine = new knockout.nativeTemplateEngine()

templateSource = knockoutTemplateSource(templateEngine, WrapperViewModel.getInstance().templates)

knockout.setTemplateEngine(templateSource)

Any ideas? I would love to be able to use your extension for my projects.

Here is a screenshot which shows my DOM and your plugin, it shows how i have nested view models and templates:

Update to WebExtensions API to support Firefox browser

Tested and updated this plugin to WebExtensions API and that made it compatible with Firefox.
Also working with Chrome version 90, tested that version due to resent issue with Chrome 92 #38 .

Here some image of the results in FF:

Can't get this to show in the dev tools anymore.

Can't get this to show either place in the dev tools. The tab is not showing.

Uncaught SecurityError

Hi, I have an issue, the panel is not shown. I am on Chrome 29.0.1547.66 m :

Uncaught SecurityError: An attempt was made to break through the security policy of the user agent. devtools.js:122

source :

var shouldDoKOtoJSValue=localStorage["shouldDoKOtoJS"];

someone else has the problem?

Panel only refreshes when selection of DOM changed. Not when observable changes

You don't see the panel content changing when you keep it open at the same dom element.
eg: when you type something in databinded input, panel content doesn't update automatically.

Google says 'This extension violates the Chrome Web Store policy'.

KO not detected when loaded by RequireJS

I have a where KO is Required, rather than explicitly included. If you evaluate ko (in the console, or watch pane) it exists, yet I get this from the extension:

error: "knockout.js is not used in the page (ko is undefined). Maybe u are using iFrames, if so, browse to the url of the frame and try again."
proto: Object
defineGetter: function defineGetter() { [native code] }
defineSetter: function defineSetter() { [native code] }
lookupGetter: function lookupGetter() { [native code] }
lookupSetter: function lookupSetter() { [native code] }
constructor: function Object() { [native code] }
hasOwnProperty: function hasOwnProperty() { [native code] }
isPrototypeOf: function isPrototypeOf() { [native code] }
propertyIsEnumerable: function propertyIsEnumerable() { [native code] }
toLocaleString: function toLocaleString() { [native code] }
toString: function toString() { [native code] }
valueOf: function valueOf() { [native code] }
proto: null

Chrome extension not in store anymore

404

debugger doesn't work in iframes

Privacy statement

Do you have any privacy statement about this chrome extension?

I would like to add your extension in our corporate white list chrome extensions, but I can't without this statement.

thank you

Removed from Chrome Web Store

Hi,

I noticed this has been removed from the extension web store in Chrome. Is there any way this can be resubmitted?

Or is there any details on why this was violating their policy so we could make code changes so that it can be resubmitted? As it is such a useful tool, it makes debugging so much easier and quicker, it would be a shame to see this extension go.

Cheers!

Recent upgrade replaces excellent debugger with some blurb ... I can't remove it

Hi. Since the last upgrade, all I can see when I click to the knockoutjs context debugger is the enclosed screen. There appears to be no escaping it - it's unusable. Can you please advise?

Thanks, Colin
![screenshot from 2017-04-25 02-36-25]
(https://cloud.githubusercontent.com/assets/15832590/25349331/9418905a-2960-11e7-8fb6-030e82be041e.png)

Extension not working in the latest version of Google Chrome

Stopped working after updating the Chrome version to 92.0.4515.107

Feature request: navigate to event handler

Hi,

Great extension.

I had an idea to do with event handlers. It would be handy to navigate to the source of event handlers directly from your "Knockout context" panel.

There is two challenges though

1. Reliably identify the source url and line number for the function
2. Actually navigate there

Regarding 2), it's not in the extension apis but I noticed that the internal dev tools source links are actually just normal links with the line number appended to them (open the 'Event Listeners' panel to see what I mean). I wonder if that would work from user extensions.

Regarding 1) It's sort of a hack, but I suppose just finding the function literal, and calling toString on that, and then searching for that exact string inside all the sources would reliably find most functions.

What do you think?

Constantly hangs the browser

I would love to use this extension but I find it constantly hangs the developer tools window.

Anything I can do to work why this occurs ?

AMD Support

I use knockout in an AMD context with require.js. The extension reports me that "knockout.js is not used in the page (ko is undefined)(...)" (which is true!).

Is there a way to make it works anyway ?

no realtime support

to be usable, this must be udpated everytime my context updates.

Problem with the order of the attributes

From today I noticed that the attributes are disordered (previously shown in alphabetical order). This makes it very difficult to find attributes in very large contexts. Is there any way to solve it? Thanks for all. Regards.

Knockout.js not found warning

I have knockout.js on the page, but I still get this info. It also comes in two pieces. And because these groups are comes as open, it shrinks the window.