How do I debug in chrome to get value of an observable in knockout?

Question

I am working on a video player app and It has multiple play buttons and each time I hit a play button loggerVideoURL takes in a url I want to find the value of loggerVideoURL .

How do I debug to find the value of loggerVideoURL at each instance of hitting the play button.

Here's my code

HTML

<div class="loggerVideoControlsWrapper p0" id="video-controls-wrapper" style="">
    <!-- Video -->
    <div class="video-js-responsive-container vjs-hd" id="video-container">
        <video crossorigin="anonymous" id="logger-media-player" preload="auto" data-bind="attr:{src:loggerVideoURL},event:{timeupdate:onPlayerTimeUpdate,play:playerOnPlay,pause:playerOnPause,seeked:playerOnSeeked,seeking:playerOnSeeking,loadedmetadata:playerOnLoadedmetadata,error:playerOnError}" class="video-js vjs-default-skin" width="auto" height="auto">
            @*controls="true" - for now *@
            @*<source data-bind="attr:{src:loggerVideoURL}" type="video/mp4" />*@
            @*<track label="English" srclang="en" kind="captions" data-bind="attr:{src:captionsFileUrl}" />*@

         </video>
        <div data-bind="if: playerSeeking() || !playerLoadedMetadataFired() || playerErrorMsg()">
            <div id="seeking-overlay">
                <div class="snippet-demo" data-bind="if: !playerErrorMsg()" style="position: relative; top: 50%; transform: translateY(-50%);">
                    <div class="snippet-demo-container demo-spinner demo-spinner__spinner-default">
                        <!-- MDL Spinner Component -->
                        <div class="mdl-spinner mdl-js-spinner is-active is-upgraded" data-upgraded=",MaterialSpinner"><div class="mdl-spinner__layer mdl-spinner__layer-1"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__gap-patch"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-2"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__gap-patch"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-3"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__gap-patch"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-4"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__gap-patch"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle"></div></div></div></div>
                    </div>
                </div>
                <!-- ko if: playerErrorMsg() -->
                <div data-bind="" class="alert alert-danger alert-dismissable" style="width: 75%;margin: auto auto;position: relative; top: 50%; transform: translateY(-50%);">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                    <h4><i class="fa fa-times-circle"></i> Error</h4> <span data-bind="text:playerErrorMsg" style="font-weight: normal"></span>
                </div>
                <!-- /ko -->
            </div>
        </div>
    </div>

JavaScript

function ClsLoggerVideo(parent) {
    var self = this;
    var timer;
    var timerInterval = 800;
    var FrameRate = TimecodeMath.FrameRate;

    function log(msg) { console.log(msg); }

    $(document).on('mouseup', function () { clearInterval(timer); });

    self.isIe = vmsWebUtils.isIE();
    self.parentLogger = ko.observable(parent);

    self.captionFiles = ko.observableArray();
    self.loggerVideoURL = ko.observable();
    //self.captionsFileUrl = ko.observable('http://ny-venturae-7.viacom_corp.ad.viacom.com/video/APOCALYPSE_NOW_1080p2398_CLIP.vtt');
    self.captionFiles.push();
    self.techAttributes = ko.observable(null);
    self.frameRate = ko.computed(function () { return self.techAttributes() == null ? null : self.techAttributes().frameRate; });
    self.isDropFrame = ko.computed(function () {
        return self.techAttributes() == null ? null : self.techAttributes().isDropFrame;
    });
    self.startTcInFrames = ko.computed(function () {
        return self.techAttributes() == null ? null : self.techAttributes().startTcInFrames;

    });

Answer 1

I'm not sure on whether you're asking how to debug in Chrome, or how to get the value in Knockout, so I'll throw out some info and hope it answers your question.

Debugging in Chrome:

1. Open the developer tools (More Tools > Developer Tools).

2. Go to the Sources tab.

3. In the left window pane open the folder that contains your Javascript files (may be called "js" for example, but will depend on your folder naming structure in your web app).

4. Click on the .js file that contains your Knockout viewmodel definition. In this case that would be the one that contains the function ClsLoggerVideo.

5. Then find where you want to set a breakpoint in the .js file and simply click on the line number.

6. When you run the function again it will break at that spot and you can hover over values or add watches by highlighting right clicking a variable. In this case loggerVideoURL.

Keep in mind with Knockout, you need to make the watch like this: self.loggerVideoURL()

You need to include the parentheses to get the underlying value of the observable. If you don't include them the you'll just see the KO observable function definition.

As far as your code is concerned I'm seeing multiple issues. First, I don't see where you handle the Play button press. You could do this any number of ways in Javascript, but since you're using KO I'd suggest using a click event binding like this:

<button type="button" data-bind="click: playButtonClicked">Play</button>

Then in your viewmodel function ClsLoggerVideo, put this:

self.playButtonClicked = function () {
    //Put some code here to land a breakpoint on so you can see the value of loggerVideoURL()
}

I hope that helps.

Answer 2

The Knockout Context Debugger chrome extension is extremely helpful. You can open dev tools as usual, but there is a new subtab for inspecting bound elements and the backing viewmodel. This approach doesn't require any breakpoints.