JavaScriptのデバッグについて | 晴笑雨笑ぶろぐ
JavaScriptをデバッグする際に、よく使う機能のみに重点を当てて説明します。 その他、色々なデバッグ方法やツール・機能がありますが、当ブログは駆け出しエンジニアさん向けであるため、ご了承ください。 まずはサンプル用のHTMLとJavaScriptを用意しますね。 <html> <head> <script src="./js/test.js"></script> </head> <body> <input type="text" id="name1" name="name1" value="" /><br/> <input type="text" id="name2" name="name2" value="" /><br/> <button onclick="hello()">挨拶する！</button><br/> <div id="out"></div> </body> </ht
vConsole - モバイルサイト用の開発者ツール
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました スマートフォンサイトをデバッグする際にはどのように操作しているでしょうか。多くの場合、macOSをUSBで接続したり、デスクトップのGoogle Chromeでデバッグするはずです。つまりデスクトップやラップトップが必須です。 vConsoleを使えばモバイルだけでコンソールが使えるようになります。ちょっとしたデバッグなら十分そうです。 vConsoleの使い方 コンソールを開いたところです。エラーも補足されています。 システム情報も取れます。 ネットワークも使えますが、vConsoleが使えるようになって以降の情報のみです。 HTML構造です。 ストレージ情報も確認できます。 vConsoleはWeb用のブラウザに開発者ツール相当の機能を提供します。コンソールでJavaScrip
JavaScriptのデバッグのコツと技 | POSTD
以前の記事で、 Webアプリケーションのデバッグの仕組み について触れました。今回は実践的なJavaScriptのデバッグについて掘り下げていきたいと思います。 ブラウザデベロッパツール 私の個人的なお気に入りはChromeデベロッパツールです。SafariやFirefoxはChromeほどの高水準に達していません。しかし、徐々に改善されてきています。FirefoxにはFirebugと改良されたFirefoxデベロッパツールが組み合わされた機能が備わっています。もし、Firefoxチームがビルトインされているデベロッパツールの改良の中で素晴らしい仕事をし続けたとしたら、Firebugはいつか、すたれるかもしれません。 個人的な好みにかかわらず、ターゲットとするあらゆるブラウザで、全てのコードのテストやデバッグができるようにすべきです。”あらゆるブラウザ”には、かの有名なInternet E
Chrome Dev Tools: JavaScript and Performance | Envato Tuts+
In this third part of our Chrome Developer Tools series, we'll review how to modify and debug JavaScript. Optimization is an important part of the development process, especially for performance-critical applications. We'll also discuss techniques for identifying potential bottlenecks in our code. As in the previous two articles, I'll be focusing on the features found in the Chrome Canary build (v
JavaScriptを使うなら必ず覚えておきたいFirebugのConsole APIの使い方 | アルパカの具
前回の記事で、jQueryセレクタのパフォーマンスを計測する際に使用したFirebugのconsole APIですが、時間を計測する以外にも便利な機能がたくさん備わっています。 今回はその中から特に役立つ機能をピックアップしてご紹介します。 目次 0.Firebugとは 1.console.log() 2.console.debug() 3.console.info() / console.warn() / console.error() 4.console.trace() 5.console.time() / console.timeEnd() 6.その他 Firebugとは？ Firebugを知らない方のために簡単に説明します。FirebugとはFirefoxのアドオン（拡張機能）です。インストールすることで、表示しているページのHTMLやCSSを表示・編集したり、JavaScrip
JavaScript開発にalertを使っている人必見！ログ出力ライブラリ「Blackbird」 | Web活メモ帳
JavaScriptでログを表示するのに使えるライブラリ「Blackbird」のご紹介。 出力したいメッセージを指定するだけできれいに整形して表示してくれます。 例えば、以下のようなJavaScriptを実行してみます。 log.debug( 'this is a debug message' ); log.info( 'this is an info message' ); log.warn( 'this is a warning message' ); log.error( 'this is an error message' ); ↑すると、こんな感じで素敵に表示してくれちゃいます。 アイコンと色で視覚的にメッセージを区別することができるので、後から見分けるのも簡単です。 使い方 使い方は簡単で、ファイルをダウンロードした後、headタグ内でJSとCSSを読み込むだけでOKです。 <
JavaScriptのconsoleをちょっと拡張して快適なデバッグ環境にする :: 5509
どこかで元ネタを見たんやけど、忘れた・・・ console.logとかdebugって開発してるとき便利ですけど、納品時に消すのを忘れたりして、うっかりconsoleに unko とか表示されたら死ぬしかないですよね。 消したやつ納品して後で改修とかになったとき、前のconsoleは当然ないわけで、面倒くさいなと思って。 下記のコードをソースファイルの頭に貼り付けておいて 頭の「window.console.debugMode」を「true」にすればconsole.logが動きます。それだけです。これなら、元のコードも変更せず、debugModeを切り替えるだけで楽々デバッグ。 // デバグモードの切り替え window.console.debugMode = false; // console.logのプチ整形 window.console._log = window.console.lo
IEでのJavaScriptのデバッグ方法 - Microsoft Script Editor編 - - 日向夏特殊応援部隊
IEでJSのエラーになったときに立ち上がるデバッガって大体の人が使いこなせてないのではないでしょうか？ ちなみに僕もそうだったのですが、ふと思い立って調べてみました。 追記 (2008-01-10T14:24:30+09:00) はてブのコメントで、 MS Office持ってない人はVisual Web Developer(VWD)で。/ちょっと前にこんなの書いたので、VWD 2008使う人は参考にしてもらえると幸い。 http://d.hatena.ne.jp/terurou/20071218/119796573 とありました。 これはid:kaorunさんにも聞いていたので後で試そう〜と思ってたので助かります。 合わせてご覧になって下さい。 Microsoft Script Editorとは？ のようにOffice付属のツールだったりします。僕の環境では、 C:\Program Fil
IEでJavaScriptを動かす際のメモリリークの調査方法:phpspot開発日誌
Screencast: JavaScript Memory Leaks in the Windows IE Browser IEでJavaScriptを動かす際のメモリリークの調査方法を紹介するスクリーンキャストが公開されており、分かりやすく調査方法について紹介されています。 3分ぐらいの動画になっています。 メモリリークの調査を行うのは、Process Explorer というソフトを使っているようです。 Process Explorer を使えば、Spy++みたいな感じで、調べたいウィンドウ部分にドラッグ＆ドロップして、該当ウィンドウのメモリサイズについて調査できるみたい。 具体的な操作方法については動画を見れば分かります。 メモリサイズがあがっていく様子を捉えた図。 これは知っておいたほうがよさそうですね。
困った時に用意しておきたいIE用のデバッグツールまとめ | 教えて君.net
ウェブ開発者にとって、ブラウザの互換性は永遠の課題。Firefoxならば「Firebug」という高機能の総合デバッグツールがあるが、IEではコレといったものがなく「IEじゃ見られないよ！」なんてクレームが入った時にあたふたした経験があるはず。 面白法人カヤックの技術ブログ「KAYAC engineers' blog」には、IE用のHTML/Javascript/CSSの構造を視覚化してデバッグできるツールがまとめられている。それぞれの特徴も掲載されているので、自分に合ったものを使おう。 ・IEのデバッグツール : tech.kayac.com - KAYAC engineers' blog ・tech.kayac.com - KAYAC engineers' blog ・DebugBar - IE extension for web developer : DOM inspector, J
複数ファイルの構文チェックも楽々！JavaScript開発に便利な「JSLint Multi Widget」:phpspot開発日誌
jslint-multi-widget - Google Code 複数ファイルの構文チェックも楽々！JavaScript開発に便利な「JSLint Multi Widget」。 フォルダをこのツールにドラッグすれば、フォルダ内にあるJSファイルを全て構文チェックしてくれ、次のように色分け表示してくれます。 ファイルをクリックすれば、エラーの詳細が表示されます。 JavaScriptファイルは、必要に応じて読み込ませたり、複数になることも多いですが、構文チェックが一括で出来るのは嬉しいですね。 Yahoo! ウィジェットベースで動作するみたい。 関連エントリ IEでのJavaScriptデバッグを可能にする「CompanionJS」 JavaScriptデバッグツール集 Chromeでも使えるJavaScriptデバッガ「XBug」
MOONGIFT: » 必見！JavaScriptのalert処理にさよならを「Blackbird」:オープンソースを毎日紹介
※ 画面は公式サイトデモより JavaScriptのデバッグによく利用されるものと言えば、alertだろう。簡単に使えて便利な関数だが、ブラウザの処理が止まってしまったり、長文の表示が難しいなどデメリットも数多い。 alertとお別れするためのJavaScriptデバッグツール そこで使ってみたいのがBlackbirdだ。Google Code上で公開されているオープンソースのJavaScriptアラートだ。 Blackbirdは見た目の格好いいフローティングダイアログにログを表示できる。デバッグ、インフォ、ウォーニング、エラー、プロファイルの5つのメッセージパターンが設定できる。Blackbirdのウィンドウでは各メッセージタイプの表示、非表示が切り替えられるようになっている。 表示位置の変更、表示するメッセージの種類が変更できる さらにF2キーを押して表示/非表示を切り替えたり、Shi
Flymakeのススメ（PHP版 , JS版）
Emacs使いなら普通に使ってるよね、ってな素晴らしいEmacs Lispの一つにFlymakeというのがあります。これは名前の通り、Emacsでファイル編集中にon the flyにmake（設定次第で何でも）してくれるEmacs Lispです。makeしてエラーが出た場合には、エラー箇所をハイライトしてくれます。typo などがあれば瞬時に気づくことができますので、開発効率がアップします。 青くハイライトされているのがwarning、赤はエラーの意味です。 PHPもJavaScriptも他の方が設定を公開されていますけど、社内で設定を紹介したところ、「Warningに別の色が付いたりしないんですね」などと言われたので、ムキになってWarningにも色を付けてみました。そんなわけで、他の方の設定とはひと味違うと思います。実はPHPに関して言うと滅多にWarningが出ないので、便利になっ
クロスブラウザデバッガNitobiBug登場、Firebugと組み合わせ強化 | エンタープライズ | マイコミジャーナル
WebアプリケーションのデバッグツールとしてはFirebugが有名だ。FireBugを使うことでJavaScriptの実行のみならずCSSやHTMLのデザインも調査できる。もはやWebアプリ開発には欠かせないツールだ。Firebugをベースにして開発されたYSlowもWebサイトのパフォーマンスを分析するツールとして代表的存在といえる。 クロスブラウザデバッグツール NitobiBug FirebugもYSlowもとても便利なツールだが、問題はFirefoxのアドオンとして実装されているということだ。Firefoxのシェアは純増しているとはいえ、Net Applicationsの調査によればIEのシェアは73%をこえている。6%のシェアを突破したSafariの存在も無視できない。そこでデバッグツールとしてクロスブラウザで動作するNitobiBugに注目してみたい。 NitobiBugはNi
WebKitのデバッガが超絶便利になっている件 - os0x.blog
WebKitのデバッガはDroseraという別アプリで提供されていましたが、つい最近(2008/05/16)本体とセットになるようになりました。 このデバッガがヤバイです。(画像でかくて自分のモニタでもはみ出してるけど気にしない) 開発のWebインスペクタを開いてから、Scriptsを選択するとDebuggerを起動するか聞かれる Attach Debuggerをクリックすると左上に読み込んでるScriptがリストになっている。(eval script)となっているのはGreaseKitが実行するScriptの模様。 GreaseKitのScriptもちゃんとソースが見えるし、 左下の蟻アイコンが青くなっているとエラー(?)のあった箇所でPauseする。右上にPausedと出ていて、この左のボタンでステップ実行とかが出来る。 右側にはローカル変数とクロージャで保持されている変数がスコープご
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptでconsole.logを使用してませんか？
IDEA*IDEA 〜 とあるサービス運営者が学んだことをまとめるブログ
IDEA*IDEA 〜 とあるサービス運営者が学んだことをまとめるブログ
diaspar.jp
Web Design, Website Development & Digital Strategy Agency | SiteCrafting