JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～ - Qiita
※2017/4/21にオンロード時のデバッグ方法8を追記しました！ こんにちは！エイチーム引越し侍の加藤です！ みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、 ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、 消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。 前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索ができる HTML、CSSはElementsから直接修正⇒確認ができる jsはSourceから直接修正できる(Ctrl+Sで保存したらその状態で実行できる) jsは
JavaScriptのデバッグのコツと技 | POSTD
以前の記事で、 Webアプリケーションのデバッグの仕組み について触れました。今回は実践的なJavaScriptのデバッグについて掘り下げていきたいと思います。 ブラウザデベロッパツール 私の個人的なお気に入りはChromeデベロッパツールです。SafariやFirefoxはChromeほどの高水準に達していません。しかし、徐々に改善されてきています。FirefoxにはFirebugと改良されたFirefoxデベロッパツールが組み合わされた機能が備わっています。もし、Firefoxチームがビルトインされているデベロッパツールの改良の中で素晴らしい仕事をし続けたとしたら、Firebugはいつか、すたれるかもしれません。 個人的な好みにかかわらず、ターゲットとするあらゆるブラウザで、全てのコードのテストやデバッグができるようにすべきです。”あらゆるブラウザ”には、かの有名なInternet E
JavaScriptのデバッグ方法 – JSを嫌いにならないためのTips | POSTD
この記事のオリジナルは voxxed に投稿されたものです。 JavaScript関連の問題を抱えるチームをサポートする仕事を通じて、いくつか共通の問題点があることに気づきました。もしあなたもJavaScriptに対するイライラを感じているのであれば、この記事は何らかの助けになるかもしれません。おことわり：私がお教えするヒントはすでにご存知のものもあるとは思いますが、うまくいけば、多少なりとも有用な情報があるかもしれません。特にエンタープライズアプリケーションやCMSソリューションを構築する際に有効なヒントです。チームの誰もが話したがらないCMSのコードについてお話しします。いずれも必要に応じて採用できるものです。 debuggerステートメント 大半のブラウザでサポートされているにもかかわらず、JavaScriptを書く際に最も活用しきれていない機能の1つです。debuggerステートメ
JavaScript デバッガの使用方法 | Firefoxの開発ツール
JavaScript デバッガ (JavaScript Debugger) JavaScriptのコードにブレークポイントを設定して、ステップ実行などを行えます。名前が同じで混同しそうですが、JavaScript Debugger (Venkman) ではありません。 SyntaxErrorなどのエラーが含まれるファイルは、デバッグできません。目的のファイルをJavaScript デバッガで見つけられない場合には、ブラウザコンソールでエラーが発生していないか確認します。 基本 起動方法 JavaScript デバッガは、そのデバッグ対象によって起動方法が異なります。それぞれ[Firefoxボタン]のメニューから、 Firefoxで実行しているWebコンテンツ … 【Web開発 → デバッガ】 Firefoxのシステム関連 (アドオンなど) … 【Web開発 → ブラウザツールボックス (ブ
DevToolsメモ
ショートカット一覧 すべてのパネル Ctrl+[, Ctrl+], Ctrl+[1-9]:パネルの移動 Esc: コンソールの表示・非表示 Ctrl+f: 現在開いているファイルやパネルを対象に検索 Ctrl+Shift+f: すべてのファイルを検索 Ctrl+o: ファイル名でファイルを検索 Elementsパネル ←,→:選 択されている要素を開く・閉じる Enter: 選択されている要素の属性を変更する h: 選択されている要素のstyleにvisibility: hidden !important;を付与する F2: 選択されている要素を編集する Esc: 要素の編集を終了する Delete: 選択している要素を削除する D&Dで要素を移動することができる Event Listeners handlerを右クリックでShow Function Definition nodeをマウス
覚えておきたいDevToolsのコマンドラインAPIまとめ - Qiita
DevTools、使ってますか？ もはやChromeじゃないと開発できないくらいに飼い慣らされています。 ブレークポイントやconsole.logなど基本的な使い方から、TimelineとAuditsを使ってのパフォーマンス計測などなど、DevToolsのポテンシャルは計り知れません。 個人的にはConsole APIが好きなんですが、今回はConsoleパネルで使える Command Line API の使い方についてまとめてみました。 $_ $_には最後に評価した式の結果が保存されています。 Console上で計算を行なった場合や、$セレクタなどでDOMを検索した結果など、最後の結果が常に保存されます。 $0 〜 $4 $0から$4にはElementsパネルで選択した要素が5つ保存されています。$0が最後に選択した要素で数字が増えるごとに過去に選択した要素になります。 $0は特に使いや
Web開発者ツールのコマンドラインAPIが便利。色々と捗るぞ
ある日、あるページで、Chromeデベロッパーツールのコンソールを開き、「jQuery使ってるページかな？」なんて思って、『$』と入力してエンターキーを押すと、以下のような表示に。 > $ function $() { [Command Line API] } コマンドラインAPI？？ って何だ？ 標準でjQueryみたいなことができるのか？ と思いながら検索してでてきたのが以下のサイト。 Command Line API Reference – Chrome DevTools — Google Developers 元々Firebugについていた機能なようなのですが、Chromeのデベロッパーツールにもついているそうです。 というわけで、高校の英語の授業では成績順にA,B,Cクラスと分かれていてずっとCクラスだった自分、そして大学の英語の必須授業はさっぱり分からずに危うく単位を落としかけ
javascriptでスタックトレース - Qiita
javascriptでちょっと賢いロガーっぽいのを作ったとしても、最終的にはconsole.logを使ったりすると、ログの表示箇所が全て同じファイル、行になるのでいまいち不便。 そこで、V8エンジンのブラウザだけだけど、スタックトレースを取得してログメソッドが実行された行数、ファイル名などを一緒に出力する方法を調べた。 を使えばいける。例えばこんな感じ。 Error.prepareStackTrace = function( e, st ) { return { functionName: st[0].getFunctionName(), lineNumber: st[0].getLineNumber(), //いろいろお好きに }; }; function log( msg ) { var obj = {}; Error.captureStackTrace( obj, log ); co
jQuery 1.9 のソースマップ対応で圧縮版でもデバッグが簡単になった話
jQuery 1.9 がリリースされました。1.9 の新機能の中ではあまり注目されていませんが、ソースマップに対応したのが地味に便利そうです。 というのも、圧縮版の jquery.min.js を使っていると 何か問題が起きたときにスタックトレースを眺めても jQuery の部分が意味不明 デバッガーで jQuery のソースにステップインしても意味不明 といった理由で、開発中には非圧縮の jquery.js を使うことが多かったわけです。 それが、1.9 からはソースマップに対応したので圧縮版のままでのデバッグが簡単になってます。 超簡単な使い方 ソースマップに対応したブラウザーは現時点では Google Chrome のみなので、Google Chrome の手順を説明します。 (Firefox はソースマップへの対応を計画中らしい) 事前準備を忘れずに Google Chrome で
【Javascript】consoleオブジェクトが持つlog以外の便利メソッド18（後編）
前回紹介したerrorメソッドや、のちほど紹介するwarnメソッドと一緒につかって、メッセージに意味付けを行うと便利に使えると思います。 logメソッド console.log(message-object) ご存知logメソッドです。引数で渡された値を出力します。 引数の値なのですが、カンマ区切りで複数渡すことも可能です。 また、あまり知られていないと思いますが、logメソッド(debugなどのメッセージを出力する系のメソッドも含む)では、printf-styleのプレスホルダの一部を使用することも可能です。 %s 文字列 %d, %i 数値 %f 浮動小数点数 %o オブジェクトへのリンク など。 FireBugでは、%cプレースホルダをつかって、メッセージのスタイルを設定することもできます。 以下、サンプルです。 var str = 'ほげほげ', intNum = 10, floa
【Javascript】consoleオブジェクトが持つlog以外の便利メソッド18（前編）
こんにちは、橋本です。 今回と次回の２回にわたり、Safari、ChromeのWebインスペクターやFirefoxのFireBugで使えるconsoleオブジェクトの使い方について書いてみたいと思います。 Javascriptのコードをデバッグする際に、console.logを使ってメッセージやオブジェクトの内容をログに表示することがあるかと思いますが、 この「console」オブジェクト、実はlogメソッド以外にも複数のメソッドがあります。 まずは、consoleオブジェクトにどのようなメソッドがあるか、console.logを使って表示してみたいと思います。 consoleオブジェクトの中身を見てみると、__proto__オブジェクトに以下のメソッドが定義されています。 assert count debug dir dirxml error group groupCollapsed g
圧縮後のJavaScriptやコンパイル後のCoffeeScriptでも、ブラウザ上で元のソースを参照できる新技術「Source Maps」登場
圧縮後のJavaScriptやコンパイル後のCoffeeScriptでも、ブラウザ上で元のソースを参照できる新技術「Source Maps」登場 JavaScriptをデプロイする際には、できるだけ小さくするために余計なスペースや改行を取り除き、さらに関数名なども変換して圧縮することがあります。しかし圧縮後のJavaScriptにバグが見つかるとそのままではデバッグしにくいため、いちいち元のソースコードに戻してデバッグしなければなりません。 Webサイト「HTML5 Rocks」の記事「INTRODUCTION TO JAVASCRIPT SOURCE MAPS」で紹介されたWebブラウザの新技術「Source Maps」は、圧縮状態のコードを実行していても元のソースコードを参照しながらデバッグできるだけでなく、CoffeeScriptのようなJavaScriptへ変換する言語であっても、
第2回 JavaScriptのデバッグとチューニング | gihyo.jp
使用頻度が高いのはデベロッパーツールを起動するCtrl+Shift+I（もしくはCtrl+Shift+J）と、コンソールを開閉するESC、コンソールでは補完候補を選択するtabなどが挙げられます。 例えば、長くて間違えやすいencodeURIComponentのスペルは、Ctrl+Shift+Jでデベロッパーツールを起動してコンソールを開き（コンソールが開かなかった場合はESC）、eだけ打ってtabキーを2回押せば encodeURIComponent が補完されるので、スペルを簡単にコピーできます。 JavaScriptデバッガの活用 前回はブレークポイントの設置方法を紹介しましたが、もう一歩進んだ条件付きブレークポイントの設置方法を紹介します。 まず、通常のブレークポイントを設置します。 この青くハイライトされた行番号の上で右クリックすると次のようなメニューが表示されます。 ここで
Firebugで元のJavaScriptのコードに手を入れずにdebug用のconsole出力を入れる方法 - monjudoh’s diary
Firebugでは条件付きブレークポイントが使えるので、 scriptタブにて該当行にブレークポイントを貼り、 条件としてconsoleへの出力を||区切りで、最後に&& falseを入れる。 console.debug('this.lastPosition') || console.dir(this.lastPosition) && false こうするとブレークポイントを通る度にconsoleへの出力は評価され、 consoleに出力され、最後の&& falseのため式全体は必ずfalseとして評価されるため ブレークすることはない。 追記 console出力系関数の戻り値はundefinedなんだから&& falseは不要か 追記 nanto_vi @monjudoh JSでは||より&&の方が優先順位が高いので、a || b && c はaが真ならbもcも評価されずに全体が真として
JavaScript で簡単にスタックトレースを取るテクニック
Firebug を使うと console.trace(); これだけでスタックトレースを取ることが出来ます。 でも、 XUL の開発とか、人のブラウザで Firebug が入ってない時とかは出来ないので、 そういう時は、 alert(Error().stack); これだけで出来ます。まあ Firefox only ですが。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chromeでデバグ中にjQuery等のライブラリをデバガから除外したい - Qiita
Maruta
GoogleChromeのデベロッパーツールのconsoleオブジェクト – FNB