如何在Chrome中調試以獲取可觀察到的挖空值？

Question

我正在開發一個視頻播放器應用程序，它有多個播放按鈕，每當我按下播放按鈕時，loggerVideoURL都會使用一個URL，我想查找loggerVideoURL的值。

在每次按下“播放”按鈕時，如何調試以查找loggerVideoURL的值。

這是我的代碼

的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

我不確定您是要問如何在Chrome中進行調試，還是要如何在Knockout中獲取價值，所以我會拋出一些信息，希望它能回答您的問題。

在Chrome中進行調試：

1. 打開開發人員工具（更多工具>開發人員工具）。

2. 轉到“來源”標簽。

3. 在左側窗格中，打開包含Javascript文件的文件夾（例如，可以稱為“ js”，但將取決於Web應用程序中的文件夾命名結構）。

4. 單擊包含您的Knockout視圖模型定義的.js文件。 在這種情況下，它將包含功能ClsLoggerVideo。

5. 然后在.js文件中找到要在其中設置斷點的位置，只需單擊行號即可。

6. 再次運行該功能時，它將在該位置中斷，您可以將鼠標懸停在值上或通過突出顯示右鍵單擊變量來添加監視。 在這種情況下loggerVideoURL。

記住淘汰賽，您需要像這樣制作手表：self.loggerVideoURL（）

您需要包括括號以獲取可觀察值的基礎值。 如果不包括它們，您將只看到KO可觀察的函數定義。

就您的代碼而言，我遇到了多個問題。 首先，我看不到您在哪里按“播放”按鈕。 您可以使用Javascript進行多種操作，但是由於您使用的是KO，因此建議您使用如下所示的click事件綁定：

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

然后在您的viewmodel函數ClsLoggerVideo中，輸入以下內容：

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

希望對您有所幫助。

Answer 2

Knockout Context Debugger chrome擴展非常有用。 您可以像往常一樣打開開發工具，但是有一個新的子選項卡可用於檢查綁定的元素和支持的視圖模型。 這種方法不需要任何斷點。