jQueryで指定されたイベントの定義場所を取得する方法 セミナー時にHTML上のイベントが指定されている要素から、実際にイベントを指定したコードが書かれているJavaScriptファイルや場所を知りたいと質問を受けました。 調べたところ良さそうな方法があったのでシェアしておきます。 ちょっと動画に取ってみたので、動画でご確認ください。 なにをやっているかというと、まず、デベロッパーツールを開き、検証したい要素を選択します。 次に右クリックして「Add attribute」から適当なidを指定します。今回は「js_debug」というidを指定しています。 次にデベロッパーツールの右上のアイコンからコンソールを開き以下のコードを入力しEnterを押します。 $._data($("#js_debug").get(0), "events"); Object->click->0の順番に開いていき、
昨日行われた『CSS Nite LP, Disk 17「HTML5による電子書籍」 』にご来場くださった皆様、そして関係者の皆様、ありがとうございました。私のセッションで使ったスライドや補足事項については、主催者からのフォローアップメールでご確認いただくとして、セッション中に紹介した「Charles」についての質問を多くいただいておりますので、取り急ぎその件だけフォローアップさせていただきます。 「Charlesを使えば何ができるか」についての解説は、当日イベントに参加いただいた皆様の特典ということにして、Charlesを使ったアレでソレするための方法を簡単ですがまとめておきます。 Charles のインストールと設定公式サイトからファイルをダウンロードし、解凍後インストールします。 起動するとこのような画面が現れますので、Proxyの設定をおこないましょう。 MacもWindowsもおそ
ハードウェア研究開発 当社ではスマートフォン検証に関わる特殊なハードウェアの研究開発をおります。 当社では Remote TestKit を支えるハードウェア技術として電磁シールドボックスと特殊USBハブを協力会社と開発しました。これらハードウェアにより、国内外の一般的なデータセンターに大量のスマートフォンを持ち込むことが可能となり、電波暗室技術を用いた局所的 WiFi 環境下で安定した通信を行なうことが可能となりました。また当技術により技適を通過していない端末の検証を合法的に実現します。 - 特許No.第5553951号 - 電磁シールドボックスの詳細 リモート検証技術の提供 全世界レベルでは既に一万機種を突破したとも言われるスマートフォン。 スマートフォン向けのアプリ開発、サイト開発においては、如何に効率的かつ短期間で開発し多種多様な機種での動作試験を行なうかが大きな課題となっています
こんにちは、橋本です。 今回と次回の２回にわたり、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
まず、iPhoneのSafariでどこでも良いのでページを開いてブックマークしましょう。 そして「How to use Firebug on your iPad and iPhone」に書かれているJavaScriptをコピーします。 javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})
Firefoxのデバッグ拡張ことFirebugですが、Firefox4よりFirebugとは別にWeb Consoleという機能が入りました。 しかし、Firebug自体もさらに便利になっているので、少し紹介します。(Firebug1.7 –1.8 の範囲で) 現在のFirefox4に正式対応しているのはFirebug1.7xで、Firebug1.8xはAlpha版として公開されているのでまだ不安定な部分もあることに注意して下さい。 特に注意書きしてない部分はFirebug1.7の項目だと思って大丈夫だと思います コマンドラインに履歴ボタン コンソールパネルでのコマンドエディタ(でかい方のコマンドライン)にHistoryボタンが新たに追加されました。 過去に実行したコマンドをポップアップから選択して挿入することができます。(以前はCtrl+ZでUndoし続ける必要があった) コマンドライン
Chrome版のFirebugことGoogle Chrome Developer Toolsですが、以前gihyoで解説したときよりさらに便利になっているので、少し紹介します(元はWebKitなので、そのうち(近いうちに)Safariでもそれなりに使えるようになるはずです)。 圧縮されたコードの整形 まず、目立つところからいきましょう。ちょうど先日更新されたChromeのdev版(12.0.742.0)に搭載されたばかりの機能で、minifyされているJavaScriptコードを読みやすいように整形して表示してくれるというものです(IE9の開発者ツールにも実装されている機能です)。 例えば、Google Analyticsのコードは圧縮されていて普通は読めません。 しかし、Chromeのデベロッパーツールなら、 このように整形してくれます。 やり方は簡単で、デベロッパーツールのScript
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です。 <
<script type="text/javascript"><!-- function print_r(obj) { var count_obj = 0; function _output(str) { document.writeln(str + "<br/>"); } function _print_r(obj, name, level) { var s = ""; if (obj == undefined || level > 4) return; for (var i = 0; i < level; i++) { s += " | "; } s += " - " + name + ":" + typeof(obj) + "=" + obj; _output(s); if (name == "document" || typeof(obj) != "object") return;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く