JavaScript で print デバッグ時に変数名を出力する - mizdra's blog
数列の和を求めるプログラムを作成することになり、意気揚々と以下のようなプログラムを書いたという状況を想像して下さい。 function sum(nums, acc = 0) { if (nums.length === 0) return 0; if (nums.length === 1) return nums[0]; return sum(nums.slice(1), acc + nums[0]); } const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; console.log(sum(nums)); // expected: 55 一見すると何も問題なさそうに見えるプログラムですが、実はバグがあります (皆さん分かりますか?) *1。実際に上記プログラムを実行すると 55 ではなく 10 が出力されます。 こうした場面に遭遇すると、自然と sum
Chrome Devtoolのmonitorを使うと関数の呼び出しを観察できて便利 - ぱすたけ日記
を読んで思い出したのでご紹介です。 元の記事と同様に以下の関数 sum について、 function sum(nums, acc = 0) { console.log({ nums, acc }); if (nums.length === 0) return 0; if (nums.length === 1) return nums[0]; return sum(nums.slice(1), acc + nums[0]); } この関数sumの引数 (nums と acc) の呼び出しごとの変化を見たい場合は、所謂プリントデバッグや debugger を使うのは一般的なテクニックとしてよく知られていますが、このような関数呼び出し時の引数を知りたい場合はmonitor(function)という関数を使うことで同様の効果を得ることが出来ます。 この場合は monitor(sum)とした後に、関
Node.jsのパフォーマンスチューニングのtips - 技術探し
--inspect, --inspect-brk --trace-opt, --trace-deopt --prof --trace-events-enabled --trace-gc node-report Performance Timing API 優しいコードの書き方へ v8::SnapshotCreator さいごに Node9が10/31に出ました🎉🎉🎉 Node v9.0.0 (Current) | Node.js 今回はNode単体の話なので、Express、Nginx等のチューニングに関してはココには書きません。 また、libuv等のコード内部の話もしません。 --inspect, --inspect-brk もともとあった、--debugから移行されました。(v8.0.0 ~) Chromeを使いデバッグ、プロファイリング等を使えるようになります。 ブラウザで使え
JavaScript デバッガの使用方法 | Firefoxの開発ツール
JavaScript デバッガ (JavaScript Debugger) JavaScriptのコードにブレークポイントを設定して、ステップ実行などを行えます。名前が同じで混同しそうですが、JavaScript Debugger (Venkman) ではありません。 SyntaxErrorなどのエラーが含まれるファイルは、デバッグできません。目的のファイルをJavaScript デバッガで見つけられない場合には、ブラウザコンソールでエラーが発生していないか確認します。 基本 起動方法 JavaScript デバッガは、そのデバッグ対象によって起動方法が異なります。それぞれ[Firefoxボタン]のメニューから、 Firefoxで実行しているWebコンテンツ … 【Web開発 → デバッガ】 Firefoxのシステム関連 (アドオンなど) … 【Web開発 → ブラウザツールボックス (ブ
Capybaraを使う際に知っておきたいこと - Qiita
defaultは? defaultではRackTestが使用されていて、高速だしRubyで書かれているのでRuby以外に依存してるソフトウェアが無くて良いのですが、JSが実行出来ませんし外部APIとかも叩けません。 個人的な意見としてはJS実行、外部APIを叩くことが必要でなければRackTestのままでいいと思います。 JS実行や外部APIを叩きたければ? こうなるとheadlessではないSelenuimか、headless driverであるCapybara-webkitやPoltergeistになってきます。 まず、headlessではないdriverを選んでしまうとテスト実行毎にブラウザが立ち上がってしまいます。これは鬱陶しいのでメインで使うには不適当です。 ということでheadless driverであるCapybara-webkitやPoltergeistになってきます。 最
express4でRESTful API作る - yutaponのブログ
ちょっとnode.jsでAPIサーバ作ろうとして express4に上げたらいろいろと使い方が変わっていたので 備忘録的に書いておきます。 expressでのプロジェクトの作り方 ここを見ながらやるのが確実。 https://www.npmjs.org/package/express express3の場合 express3までは $ npm install -g express # グローバルにexpressコマンド入れて $ express appName # expressコマンドでひな形作成 .. $ node app.js # アプリケーション起動 こんな感じでexpressプロジェクトを作れましたが、 express4から結構変更されています。 express4の場合 express4ではひな形を作るコマンドが本体から分離されました。 またアプリケーションの起動方法も変更されて
覚えておきたい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は特に使いや
Shibu's Diary: JavaScriptのメモリリークを10倍速で発見する
渋日記@shibu.jp 渋川よしきの日記です。ソフトウェア開発とか、ライフハックを中心に記事を書いていきます。 メモリリーク。一言でプログラマを死に追いやる恐怖の言葉。C/C++の世界ではmallocしたのにfreeしないとかのケアレスミスでよく起きていた問題です。その後、ガベージコレクタが掃除してくれるプログラミング言語が増え、一部の言語で循環参照に気をつけるぐらいであまり気にしなくても良い的な風潮になっています。 というものの、そうとも言ってられなくない状況も増えてきています。クラウドのスケールアウトブームも一段落というかコモディティ化し、go言語で再び性能向上方面に関心が寄せられたり、日本でErlangの勉強会が満席になったり、スケールアウトから再びスケールアップ方面に話題が移りつつあるのを感じます。長時間稼働のサーバで、スケールアップしてさらに数多くのリクエストを大量に受けるよう
JavaScript で throw "" ではなく throw new Error() を使ったほうがよい(些細な)理由 - latest log
JavaScript で人為的に例外を発生させるには、大きく分けると以下の2種類があります。 throw new しない書き方 throw "ソフトウェアでエラーが発生しました。サポート担当者に連絡し、この問題を報告してください。"; o_o は String 扱いで、o_o.stack も undefined になっています。 throw new する書き方 throw new Error("一般的なエラーだよ"); throw new TypeError("型がちがうよ"); throw new SyntaxError("文法おかしいよ"); throw new URIError("URIちがうよ"); 他にも、RangeError, ReferenceError, MediaError, FileError, EvalError などがあります。 throw new した場合は、o_
npmとbrowserifyを使ったクライアントサイドのウェブアプリ開発
YoutubeとVimeoの検索結果のRSSをまとめてOPMLで取得できるサイトを作った | Web scratch で公開した Tech Video RSS Searcher はbrowserifyを使って作ったので、その辺の開発フローについての記事です。 browserify って何? browserify はNode.jsスタイルで書かれたモジュール(CommonJS)を ブラウザで利用できるように変換するコマンドラインツール(Nodeモジュール)となっています。 又、node.jsのCore Modulesのshimが用意されていて、 npmで公開されているnode.js向けのモジュールも一緒に変換してブラウザで動かすことが出来るようになっています。(普通に require で読みこめば勝手に変換されます) 原理的に無理だったり全てのモジュールが動くわけじゃないですが、 その辺の互
Backbone.jsで全イベントをconsoleに出力するデバッグ用スクリプト - Qiita
(function () { 'use strict'; // ログのスタイル var logStyles = { timestamp: { color: 'gray' }, label: { color: 'white', 'border-radius': '2px' }, event: { color: 'blue', 'font-weight': 'bold', 'font-size': '110%' } }; // ラベルの色 var labelColors= { Model: 'red', Collection: 'purple', View: 'green', Router: 'black' }; function debugEvents(parts) { return function (prefix) { this.__debugEvents = this.__debugE
マネーニュース2ch
まず、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);})
ベンチマークを完走させる - latest log
ベンチマーク中に「なんかビジー。スクリプト止めとく?」なダイアログで、台無しになってしまうことがあります。 今日はそれを回避する設定をご紹介。 IE: レジストリに新しい値を追加することで可能 KEY: HKEY_CURRENT_USER/Software/Microsoft/InternetExplorer/Styles/MaxScriptStatements(DWORD) VALUE: デフォルトが 5000000 なのでそれ以上の値を指定する Firefox: about:configで設定可能 KEY: dom.max_chrome_script_run_time VALUE: デフォルトが 20 なのでそれ以上の値を指定するか、0 を指定する。0 でタイムアウトしなくなる。 Safari: 開発メニューで設定可能 [メニュー] - [開発メニュー] - [Runway JavaS
[JS]MicrosoftからJavaScriptのメモリリーク検出ツール
MicrosoftのヨーロッパチームからJavaScriptのメモリリークを検出するツール「JavaScript Memory Leak Detector」のベータ版がリリースしました。 JavaScript Memory Leak Detector JavaScript Memory Leak Detectorは、Windows+IE専用のツールで、ダウンロード・インストールは以下の手順になります。 下記の「download link」からファイルをダウンロード。 Installation ファイルを解凍して、「JSLeaksDetector.msi」をダブルクリックして、インストール。 インストール時は、IEは終了しておく。 インストールが完了したら、IEを起動。 IE7の設定方法 [表示] - [エクスプローラ バー」 -[js memory leak detector]をチェック。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PHP,Ruby,Node.js等のサーバサイドのデバッグをChrome上で行える「Chrome Logger」:phpspot開発日誌