我正在开发一个视频播放器应用程序，它有多个播放按钮，每当我按下播放按钮时，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中进行调试，还是要如何在Knockout中获取价值，所以我会抛出一些信息，希望它能回答您的问题。
在Chrome中进行调试：
打开开发人员工具（更多工具>开发人员工具）。
转到“来源”标签。
在左侧窗格中，打开包含Javascript文件的文件夹（例如，可以称为“ js”，但将取决于Web应用程序中的文件夹命名结构）。
单击包含您的Knockout视图模型定义的.js文件。在这种情况下，它将包含功能ClsLoggerVideo。
然后在.js文件中找到要在其中设置断点的位置，只需单击行号即可。
当您再次运行该函数时，它将在该位置中断，您可以将鼠标悬停在值上或通过突出显示右键单击变量来添加监视。在这种情况下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()
}
希望对您有所帮助。