jsfiddleでjsをデバッグする方法


95

私はこのjsfiddleで探しています:http://jsfiddle.net/carpasse/mcVfK/ それは問題ではありません罰金を動作しますが、私はjavascriptを介してデバッグする方法を知りたいです。デバッガーコマンドを使用しようとしましたが、[ソース]タブにありませんか?これをデバッグする方法はありますか?

フィドルのコード:

angular.module('app', ['appServices'])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider.
                when('/home', {templateUrl: 'home.html',   controller: HomeCtrl}).
                when('/list', {templateUrl: 'list.html',   controller: ListCtrl}).
                when('/detail/:itemId', {templateUrl: 'detail.html',   controller: DetailCtrl}).
                when('/settings', {templateUrl: 'settings.html',   controller: SettingsCtrl}).
                otherwise({redirectTo: '/home'});
}]);

1
単語debugger;をコードに挿入します。ChromeとFirefoxは自動的にステップスルーデバッガーを開きます!(このヒントを@ user3335908の回答からコピーして、より目立つようにしました)
Will Sheppard、

回答:


53

JavaScriptは、Chromeの「ソース」タブのfiddle.jshell.netフォルダーから実行されます。以下のChromeスクリーンショットに示すインデックスファイルにブレークポイントを追加できます。

ChromeでのJSFiddleのデバッグ

ここに画像の説明を入力してください


9
これは私には何も示しません。空のインデックスファイルが表示される
Oliver Watkins

1
@OliverWatkins私にとっても空だったので、上部にある[更新]をクリックしてこれを修正しました。もう一度実行した後、開発者ツールパネルの[ソース]タブの[jsfiddle.net]の下にあり、名前付きフォルダーの下にありました。 、コードを示す別のインデックスファイルを含む追加のディレクトリがありました。お役に立てれば!
MilesMorales 2016年

私はfiddle.jshell.netの下に3番目のフォルダーがあり、(index)も持っています。それを開くと、jsが埋め込まれたhtmlファイルがあります。(私がこれを書いた48行目)
John MacIntyre

fiddle.jshell.netのみを含む_display(index)とほぼ空のHTMLページである内部、<p>That page doesn't exist.</p>。私のjsコードがありません
CygnusX1

35

debugger;コードでステートメントを使用します。ブラウザはこのステートメントにブレークポイントを挿入し、ブラウザのデバッガを続行できます。

これは少なくともchromeとfirefoxで動作するはずです。 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/debugger

angular.module('app', ['appServices'])
.config(['$routeProvider', function($routeProvider) {
    // *** Debugger invoked here
    debugger;
    $routeProvider.
            when('/home', {templateUrl: 'home.html',   controller: HomeCtrl}).
            when('/list', {templateUrl: 'list.html',   controller: ListCtrl}).
            when('/detail/:itemId', {templateUrl: 'detail.html',   controller: DetailCtrl}).
            when('/settings', {templateUrl: 'settings.html',   controller: SettingsCtrl}).
            otherwise({redirectTo: '/home'});
}]);

これが最良の答えです!
vibs2006 2017年

6

言及する価値のある何か。Chrome開発ツールを使用している場合。ctrl+ shift+ Fを押すと、ソース内のすべてのファイルを検索できます。


2
それはCmdを+ Altキー+ FであるMac上で、非常に便利であること
ジョン・W・クラーク

これははるかに良い答えですが、この方法で見つけたコードに設定されたブレークポイントは適用されません。
Slbox 2018年

このヒントのおかげで、ソースツリーに表示されないファイル内のコードを見つけることができました...
GarfieldKlon

3

他の回答に加えて。

多くの場合、デバッグ情報をコンソールに書き込むだけで便利です。

console.log("debug information here");

出力は、ブラウザーの開発ツールコンソールで利用できます。通常のjavascriptコードから記録されたように。
これは非常にシンプルで効果的です。


3

コードにデバッガーステートメントを追加し、クッパで「開発者ツール」を有効にします。次に、JSFiddleでコードを実行すると、デバッガーがヒットします。


0

ここに別の場所があります:)

Jsfiddle.netノードの下。

ここに画像の説明を入力してください


これは、ページに表示されているソースコードと<pre>... で囲まれているようです</pre>。実際の実行可能なコードではありません。
CygnusX1

このコードはデバッグできません。あなたができないことの一つのヒントは、欠けているハイライトです...
GarfieldKlon

0

JavaScriptは、開発者ツールを使用する場合、Chromeの[ソース]タブの?editor_console=trueフォルダーresult (fiddle.jshell.net)/fiddle.jshell.net/_displayフォルダー内のファイルから実行されます。コードにブレークポイントを追加して、ページを更新できます。 ここに画像の説明を入力してください

Chromeデバッガーの使用の詳細については、ChromeでJavascriptをデバッグしようとするを参照してください。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.