我如何在Chrome中调试以获得可观察到的淘汰赛的价值

我正在使用视频播放器应用程序，并且它具有多个播放按钮，并且每次点击play按钮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;
    });

我不确定您是在问如何在Chrome中调试还是如何获得淘汰赛的价值，因此我会丢弃一些信息并希望它能回答您的问题。

在Chrome中调试：

打开开发人员工具(更多工具>开发人员工具(。
转到"源"选项卡。
在左窗中，窗格打开包含JavaScript文件的文件夹(例如，可以称为" JS"，但会依赖您的Web应用程序中的文件夹命名结构(。
单击包含您的敲除视图模型定义的.js文件。在这种情况下，它将是包含函数clsloggervideo的一个。
然后找到要在.js文件中设置断点的位置，然后单击行号。
再次运行该功能时，它将在该位置中断，您可以通过突出显示右键单击变量来悬停在值或添加手表。在这种情况下，loggervideourl。

请记住淘汰赛，您需要这样的手表：self.loggervideourl((

您需要包括括号以获取可观察到的基础值。如果您不包含它们，则只会看到可观察的函数定义。

就您的代码而言，我看到了多个问题。首先，我看不到您在哪里处理播放按钮按在哪里。您可以在JavaScript中以多种方式来执行此操作，但是由于您使用KO，建议您使用单击事件绑定这样的绑定：

<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()
}

我希望有帮助。

敲除上下文调试器chrome扩展程序非常有帮助。您可以像往常一样打开开发工具，但是有一个新的子选项卡用于检查绑定元素和衬板ViewModel。这种方法不需要任何断点。

相关内容

最新更新

热门标签：