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 デバッガの使用方法 | Firefoxの開発ツール
JavaScript デバッガ (JavaScript Debugger) JavaScriptのコードにブレークポイントを設定して、ステップ実行などを行えます。名前が同じで混同しそうですが、JavaScript Debugger (Venkman) ではありません。 SyntaxErrorなどのエラーが含まれるファイルは、デバッグできません。目的のファイルをJavaScript デバッガで見つけられない場合には、ブラウザコンソールでエラーが発生していないか確認します。 基本 起動方法 JavaScript デバッガは、そのデバッグ対象によって起動方法が異なります。それぞれ[Firefoxボタン]のメニューから、 Firefoxで実行しているWebコンテンツ … 【Web開発 → デバッガ】 Firefoxのシステム関連 (アドオンなど) … 【Web開発 → ブラウザツールボックス (ブ
Chromeは簡単にJavaScriptオフできる - おれ かきすてる おまえ よむ
背景を止められない不自由なインターネット - hitode909の日記という記事で最近のブラウザはJavaScript切る程度のことも簡単にできねーから残念だよねーうんこちんちん、的な話が展開されていたのが記憶に新しいけれど、実はChromeに限って言えば、超簡単にJavaScriptを無効化することができる。UserScriptとかもいらない。 設定はたったの3クリック。アドレスバーの左端に表示されているアイコンをクリック→Javascript:→このサイトでは常にブロック、これだけ。設定を反映するためにリロード必要なのがちょっと惜しい。 設定はサブドメイン単位で保存されるっぽいので、影響範囲もほどよく限定されて使い勝手が良い。 えー君たちこんなことも知らないのぉ？(ﾄﾞﾔｧ)的な感じでお送りしたけど、実際知ったのは10分前だし、前はこんなのなかったような気もしたけど、どうやら2012年
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クラスだった自分、そして大学の英語の必須授業はさっぱり分からずに危うく単位を落としかけ
Google Chrome/Firefoxで使える開発スニペット集·DevTools Snippets MOONGIFT
DevTools SnippetsはGoogle Chrome/Firefox用のソフトウェアです。 このソフトウェア（？）を試すまで知らなかったのですが、Google Chromeのデベロッパーツールにはスニペット管理機能が備わっています。よく使うJavaScriptを登録しておけば開発がよりスムーズになります。そこで今回は便利なスニペットを多数登録しているDevTools Snippetsを紹介します。 例えばこれはjQueryが読み込まれていないサイトでjQueryを読み込むスニペット。 スニペット編集中。DevTools Snippetsにあるものを貼付けるだけです。 後は登録してあるものの中から右クリックしてRunを押すだけです。 これまた知らなかったのですが、consoleでテーブル表示。こちらはクエリストリングを分割してテーブル表示してくれます。 DevTools Snipp
【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
第2回 JavaScriptのデバッグとチューニング | gihyo.jp
使用頻度が高いのはデベロッパーツールを起動するCtrl+Shift+I（もしくはCtrl+Shift+J）と、コンソールを開閉するESC、コンソールでは補完候補を選択するtabなどが挙げられます。 例えば、長くて間違えやすいencodeURIComponentのスペルは、Ctrl+Shift+Jでデベロッパーツールを起動してコンソールを開き（コンソールが開かなかった場合はESC）、eだけ打ってtabキーを2回押せば encodeURIComponent が補完されるので、スペルを簡単にコピーできます。 JavaScriptデバッガの活用 前回はブレークポイントの設置方法を紹介しましたが、もう一歩進んだ条件付きブレークポイントの設置方法を紹介します。 まず、通常のブレークポイントを設置します。 この青くハイライトされた行番号の上で右クリックすると次のようなメニューが表示されます。 ここで
Firebugを活用しよう！jQueryの動作チェックに最適な『FireQuery』
皆さんご存知のFirefoxのアドオン「firebug」コーダーとかであれば、これを入れている人はかなり多くいると思います！ しかし、中には『linker』のまーしーさんや『スグラボ』のフジカワさんのように、”いまいちFirebugを使いこなせていない”なんて人もいるのではないでしょうか？ 今回はそんな方もふくめ「FireQuery」のご紹介を仕様と思います！個人的にかなり便利だと思います。 FireQueryとは？ FireQueryは、Firebugを便利にさせる機能強化アドオンで、Firebugのコンソールで楽々jQueryを使えるようにしたり、DOM画面イベントがどこについているのかとかを確認することができるようになるツールです。 ただのFirebugでもJavaScriptのデバッグや動作の確認をすることはできたのですが、FireQueryを入れることによって、jQueryを使っ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chromeでデバグ中にjQuery等のライブラリをデバガから除外したい - Qiita
GoogleChromeのデベロッパーツールのconsoleオブジェクト – FNB