JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～ - Qiita
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～JavaScriptjQuery ※2017/4/21にオンロード時のデバッグ方法8を追記しました！ こんにちは！エイチーム引越し侍の加藤です！ みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、 ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、 消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。 前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索が
ブレークポイントを使ったJavaScriptデバッグを整理してみた【再入門】 - Qiita
はじめに プログラミングの上達において、デバッグスキルを上げることはとても重要で近道の1つだと考えています。 私自身、勉強し始めた頃に知っていれば（理解できていれば）とよく思います。 今回、JavaScriptデバッグについてChromeDevtoolsとブレークポイントを使った基本パターンを整理しました。 自身の復習かつ、あまり馴染みの無い方でも、以下おおよそ理解できるようになれば良いなぁ、というのが本稿の目的です。 どのようなものにブレークポイントが貼れるのか どういった時にブレークポイントが発動されるのか ブレークポイントが発動されると何ができるのか ご存知の方には特に目新しいことはないかと思いますが、何かのお役に立てば幸いです。 表示・動作はChrome 50.0.2661.87mで確認したものになります(2016-05-11) タブやパネルの位置は環境によって異なる可能性がありま
メール回りのテストやデバッグには「MailCatcher」が便利ですぞ | 東北ギーク
こんにちは。リスペクトの木村です。 今日は、「MailCatcher」というRubyで使うGemライブラリの話をお送りします。 MailCatcher とは Samuel Cochran氏が開発した、シンプルなSMTPサーバーです。特に細かい設定は不要で、起動するだけでSMTPサーバーが起動します。(ポートは1025番) これだけであればよくあるSMTPサーバーなのですが、MailCatcherの特徴は「SMTPサーバーを経由したメールをブラウザ上から確認できる」という所にあります。送信しようとしたメールはMailCatcherのSMTPサーバーから先には送信されません。 Webサーバーが同時に起動(ポートは1080番)するので、ブラウザからアクセスすると下記のような画面が表示されるので、そこから確認できます。 届いたメールはほぼリアルタイムで受信トレイに表示されるため、リロードの必要はあ
JavaScriptのデバッグ方法 – JSを嫌いにならないためのTips | POSTD
この記事のオリジナルは voxxed に投稿されたものです。 JavaScript関連の問題を抱えるチームをサポートする仕事を通じて、いくつか共通の問題点があることに気づきました。もしあなたもJavaScriptに対するイライラを感じているのであれば、この記事は何らかの助けになるかもしれません。おことわり：私がお教えするヒントはすでにご存知のものもあるとは思いますが、うまくいけば、多少なりとも有用な情報があるかもしれません。特にエンタープライズアプリケーションやCMSソリューションを構築する際に有効なヒントです。チームの誰もが話したがらないCMSのコードについてお話しします。いずれも必要に応じて採用できるものです。 debuggerステートメント 大半のブラウザでサポートされているにもかかわらず、JavaScriptを書く際に最も活用しきれていない機能の1つです。debuggerステートメ
Firefox の開発ツールに追加された新機能（2014 年 5 月 2 日版） | Mozilla Japan ブログ
最新の Firefox の開発ツールに追加された新機能をご紹介します。 ご紹介する新機能は 2014 年 5 月 2 日にリリースされた Firefox Aurora でお使いになれます。 ボックスモデルの編集インスペクタで要素を選択するとその要素のマージンや幅などが表示されますが、表示されている数値をダブルクリックすることで、ボックスモデルの各値を編集できるようになりました。 ここでの編集した内容は、その場でレンダリング結果に反映されます。 数値を直接入力する以外に、Alt と矢印キーの上下で数値が 0.1 ずつ増減できます。これで位置の微調整もより効率的に行えます。 また Shift キーと矢印キーの上下で、数値を10ずつ増減できます。 Eyedropperインスペクタに付属のカラーピッカーに Eyedropper がつきました。 これで色を取得するピクセルを、文字通りピクセル単位で指
Python の CUI デバッガ PudB が便利すぎた件
Python のデバッガといえば言語そのものに付属している pdb がまず挙げられるけど、pdb は実行中の行以外を確認できなくて正直かなり使いづらさを感じる。 それ以外の Python のデバッガとしては、以前にこのブログでも winpdb を紹介しているし、それ以外だと Eclipse PyDev プラグインの GUI デバッガをよく使っている。 とはいえ、これら二つは動作に X Window System が必要だったり、プラットフォームとして Eclipse や wxPython をインストールしなきゃいけないのが結構手間になる。 今回紹介する PudB は動作に特別なプラットフォームが不要でなおかつ pdb より便利な CUI のデバッガだ。 インストールはいつも通り PyPI から PIP で。 必要に応じて sudo などする。 $ pip install pudb 使い方は
Ruby の http ライブラリの通信を表示する http-dump を作った - 2nd life (移転しました)
Ruby 上で http を叩いた通信見たい時に、毎回同じ事をやってるので抽象化して http-dump というライブラリを作った。 https://github.com/hotchpotch/http-dump $ gem install http-dump require 'net/http' require 'uri' require 'http-dump' HTTPDump.dump { Net::HTTP.get(URI('http://example.com')) } と http でやりとりしてるコードを block で囲むと、以下のように出力される。 > GET http://example.com/ with headers {'Accept'=>'*/*', 'Accept-Encoding'=>'gzip;q=1.0,deflate;q=0.6,identity;q=
slow.js·JavaScriptをゆっくり実行 MOONGIFT
デバッグに良いかも？ JavaScriptでアニメーションやイフェクトを実行したり、何らかの処理を行うといったことは良くあるのですが、ほんの一瞬で終わってしまう処理の場合確認がとてもしづらいことがあります。 そこでJavaScriptの実行時間を遅らせられるslow.jsを使ってみましょう。CSSによるイフェクト処理をゆっくり実行してくれるようになります。 例えばこういったモーダルを表示する処理に使います。 使い方は簡単で、 slow.listen({ keyCode: 16, multiplier: 2 }); のようなコードを記述します。keyCodeで何かのキーを指定し、そのキーが押されている状態だとイフェクト処理をmultiplierで指定した数字倍遅らせます。この場合、速度は1/2になるといった具合です。 あるキーを押した時だけ実行速度が変えられるのでデバッグとして使ってみるのも
CoreからRubyのバックトレースを表示するgdbruby.rbを作った
gdbperl.plというスクリプトがあります。そんｋする樋口証さん作の、gdbを操作してPerlのプロセスのバックトレースを取るツールです。生きているプロセスだけではなく、coreを取っておけばそのcoreからバックトレースが取れるのが特徴です。 gcoreというコマンドが/usr/binあたりにあって、これを使えば走っているプロセスのcoreを取得することができます。よって、本番環境で気軽にcoreを取ってgdbperl.plにかけることによって、刺さっているポイントを見つけたりすることができます。超便利。 くわしくは、Perlスクリプトをgdbでデバッグを参照ください。 んで、その便利なgdbperl.plをRubyに移植してみました。その名もgdbruby.rb。単純。 gdbruby.rb 使い方とか Rubyはデバッグシンボル付きのものをご用意ください。 生きているプロセスにア
Rails4 今のところ最強なデバッグツール達 - Qiita
Gemfile の 「group :test, :development do」ブロックに書いている 個人的に最強な設定 を晒したいと思います。(2013/10/24 現在) 作業環境 Ruby 2.0.0p247 Rails 4.0.0 Gemfileに設定している内容 ※ コメントに随時変更したものを追記しますー group :test, :development do gem 'pry-rails' gem 'pry-doc' gem 'pry-stack_explorer' if RUBY_VERSION >= '2.0.0' gem 'pry-byebug' else # 以下はRuby1.9の時のみ使う(pry-byebugの代わりに) # debuggerは1.9以下でしか動作しない, remote は byebug で使えないようになった gem 'pry-debugger
Railsのログに出力されるパラメータやSQLを整形する - ( ꒪⌓꒪) ゆるよろ日記
Railsのログに出力されるパラメータやSQLを整形してみた。開発中は便利かもしれない。 こんな感じになる。 詳細はこのコミットを参照。サンプルのアプリとしてRailsApps/rails3-bootstrap-devise-cancan · GitHubを使わせてもらった。 Apply pretty formating to logged sql/parameters · f734fb0 · yuroyoro/rails3-bootstrap-devise-cancan · GitHub SQLの整形には、sonota/anbt-sql-formatter · GitHubを使った。 Parameterは、michaeldv/awesome_print · GitHubを利用してる。ap便利。 ActionController::LogSubscriberやActiveRecord::L
おすすめ！サーバサイドのログをGoogle Chromeのデバッグツールで確認·Chrome Logger MOONGIFT
Chrome LoggerはPython/PHP/Ruby/node.jsに対応したGoogle Chromeでサーバサイドのログが表示できるChrome機能拡張です。 Google Chromeを使ってWebシステムを開発している時に、サーバサイドはログを見て、JavaScriptなどのクライアントサイドはコンソールを見ます。しかしこれでは面倒、という人にお勧めしたいのがChrome Loggerです。Google Chromeのデバッグツールにサーバサイドのログが出力できるようになります。 こんな感じのコードを書きます。 コンソールにサーバからのデバッグメッセージが出力できるようになります。 PHPの連想配列もJSONとして取得できています。 オプション画面です。 こんな感じに行数を出力することもできます。 Chrome Loggerの面白い点は、ツールとしてはChrome Logge
連載: IBM Watson Workspace #鬼わか アプリケーション開発: 第 7 回: IBM Watson Workspace で AI を利用したアプリ連携の実現 #鬼わか 解説（前編）
自動改札機の運賃計算プログラムはいかにデバッグされているのか？ 10の40乗という運賃パターンのテスト方法を開発者が解説（前編）
自動改札機の運賃計算プログラムはいかにデバッグされているのか？ 10の40乗という運賃パターンのテスト方法を開発者が解説（前編） ふだん何気なく使っている鉄道。改札を降りるときにICカードを自動改札にかざすと、「ピッ」という音と共に一瞬のうちに運賃を計算してくれます。けれど、複数の路線を乗り継いだり、途中で定期券区間が挟まっていたりと、想像しただけでもそこには膨大な組み合わせがあります。それでも運賃計算プログラムはわずか一瞬で正しい運賃計算が求められ、バグがあったら社会的な一大事にもつながりかねません。 爆発的な計算結果の組み合わせがあるはずの運賃計算プログラムは、どうやってデバッグされ、品質を維持しているのでしょうか？ 9月12日から14日のあいだ、東洋大学 白山キャンパスで開催された日本科学技術連盟主催の「ソフトウェア品質シンポジウム 2012」。オムロンソーシアルソリューションズ 幡
JavaScriptのメモリリークを発見してくれるツール「Leak Finder」をグーグルが公開
ガベージコレクションの機能を備えるJavaScriptのような言語で開発されたアプリケーションでは、基本的にメモリリークは生じないはずですが、それでも回収されないメモリ領域がどんどん増えていくというメモリリーク的な状況は起こりえます。 leak-finder-for-javascript - Tool for finding memory leaks in JavaScript programs. - Google Project Hosting メモリリークは最終的にはそのソフトウェアの動作を遅くしたり不安定にしますが、短期的には問題なく動作しているように見え、単純なテストでは症状が表れにくいため、発見は難しいものです。 グーグルはこうしたJavaScriptのメモリリークを検出してくれるツール「Leak Finder」を公開したことを、ブログ「Leak Finder: a new to
【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
#java_ja で例外とロギングについて勉強会をやるというのでいってきた＆飛び込みLTやった＆運用の視点から見たアプリケーションのログについて - たごもりすメモ
LOG.debug("nice catch!") - connpass 2012/06/27 java-ja 『LOG.debug("nice catch!")』#java_ja #javaja - Togetterまとめ blogエントリを書くまでがjava-jaだと聞いたのでとりあえず書く。超まとまってません。各スピーカーの話の内容については他の人のblogに(たぶん)書いてあるのでそっちを見るとかTogetterを眺めるとかすればよいのではないでしょうか。 主催のみなさま、および会場提供のGREEさま、ありがとうございました。そういえばGREEでの勉強会って初めて参加した気がする。六本木ヒルズの入館、だいぶ簡単になりましたね。 いってきた どっちかというとアプリケーションのコード書く人が多かったんですかね。という感じで、アプリケーションコードからいかにして例外を投げるか、それをどのよ
Rubyで開発するときに入れておきたい三種のRubyGems - KAYAC engineers' blog
「つくるための三種の神器」というテーマで続けている「777ブログウェイ」! 9日目となる本日は「Rubyで開発するときに入れておきたい三種のRubyGems」と題して、定番の RubyGems を3つご紹介します。 1. bundler「bundler」は、アプリケーションが依存するgemを管理するツールです。今やgem管理のデファクトスタンダードです。 「gem install hoge」のようにコマンドで gem をインストールしていくと、あれよあれよとグローバルな領域にどんどん色んなgemが…それも複数バージョン混在していきます。そして、いずれは、このアプリケーションで必要なgemはどれだっけ…バージョンはいくつだっけ…といった具合に、どんどん依存関係が分からなくなってきます。ここで活躍するのが「bundler」です。 使い方はいたって簡単。1) bundler のインストールgem
DBIx::Tracer 書いた - tokuhirom's blog
https://github.com/tokuhirom/DBIx-Tracer/ https://metacpan.org/release/TOKUHIROM/DBIx-Tracer-0.02/ DBIx::QueryLog が便利でよくつかってるんだけど、なんかこう、立てまししまくった家みたいなコードになってて、ハウルの動く城のようになってしまっていて、ログをだしたいなーってときとかにはがんばってオプションをしらべたら便利なんだけど、単にクエリを集めたいときとか、自分でいろいろ条件を指定して草薙葵ばりのプロファイリングを行いたいときなどにはちょっと不便な気がしなくもなかったので、DBIx::QueryLog のうち、トレースする機能の部分だけぬきだしたモジュールを書いてみた。 ほとんどコピペですが、使いたい人はつかってください。使いたくない人は使わないでいいとおもいます。 久々にブログ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JavaScript]使い分けるだけで今すぐデバッグ効率を上げる、consoleオブジェクトの関数 - Qiita![[JavaScript]使い分けるだけで今すぐデバッグ効率を上げる、consoleオブジェクトの関数 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/b522995e49410a98e38a0602e0c9ea8df6e44d4d/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCVFNCVCRCVCRiVFMyU4MSU4NCVFNSU4OCU4NiVFMyU4MSU5MSVFMyU4MiU4QiVFMyU4MSVBMCVFMyU4MSU5MSVFMyU4MSVBNyVFNCVCQiU4QSVFMyU4MSU5OSVFMyU4MSU5MCVFMyU4MyU4NyVFMyU4MyU5MCVFMyU4MyU4MyVFMyU4MiVCMCVFNSU4QSVCOSVFNyU4RSU4NyVFMyU4MiU5MiVFNCVCOCU4QSVFMyU4MSU5MiVFMyU4MiU4QiVFMyU4MCU4MWNvbnNvbGUlRTMlODIlQUElRTMlODMlOTYlRTMlODIlQjglRTMlODIlQTclRTMlODIlQUYlRTMlODMlODglRTMlODElQUUlRTklOTYlQTIlRTYlOTUlQjAmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTc4Yjg5YTg5NTYwYjAxNDRjMzQwMjk1YjJhNGUyNTM4%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrYXNoaXJhMjMzOSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZTMzNDU5OTkwZjkzNWRiZWM3MDA4MWMyODVjOTIyZDE%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44K144Kk44OQ44O844O744OQ44K6%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D96abebc51c4d96ee1ecf0185b536be1e)
