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)とした後に、関
console.log の落とし穴：console.log にはオブジェクトの参照が渡るので気を付けよう - Qiita
TL; DR console.log()に大きなオブジェクトや配列を渡すと、console.log()を呼び出した時点での値ではなく、コンソールでそれをクリック展開した時点で評価した値が表示される。 もう少し詳しく console.log()に大きなオブジェクトを渡すとコンソール上で省略されて表示されますが、その省略表示を展開すると、console.log()が呼び出された時点の値ではなく、展開したその時点で評価した値が表示されます。 つまり例えばあるオブジェクトに操作を施す前にconsole.log()を取っていても、実行終了後のコンソールには操作を施した後のオブジェクトが表示されるということです。 要はオブジェクトへの参照を保持しているような挙動です（参考）。 例 （以下の例ではわかりやすさのため常に省略表示されるconsole.dirを使っています） obj.aをに値を代入する前後で
ブラウザ上でのJavaScriptエラーを収集する手法について · なるはやで いい感じの 動作確認
現代的なWebサービスを構築する場合、避けては通れないのが各種ログの収集と活用です。 HTTPサーバの各種ログ (e.g. アクセスログ、エラーログ) を始めとして、サーバサイドのアプリケーションログなどもよく収集されています。 サーバサイドのログについては、fluentdなど、収集するための手法はある程度確立しているように思いますが、フロントエンドでのログ収集については、あまり議論されていないように思います。 先日、お仕事でWebサービスを作成したのですが、そのときに改めてブラウザ上でのエラーログの収集について本気出して考えてみたので、ここに記事としてまとめてみようと思います。 ブラウザ上のエラーログ収集の目的 まず収集する目的についてですが、大きなところで以下のようになるかと思います。 継続的な不具合修正のため (サービス改善) ユーザからの問い合わせ時に調査するため (サポート改善)
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は
console.logまとめ 2016年夏 - Qiita
console.log関連についてまとめました。 モダンブラウザであればどれも使用できると思いますが、基本出力結果等はchromeで確認したものです。 console.hogehogeのいろいろ console.log 基本 引数を入れることで出力結果をカスタマイズできます console.info、console.warn、console.error それぞれで見た目を変えることができます。 console.assert 式を評価してfalseの場合にログ出力します。 console.count ログの出力結果が同じ場合にカウント数が自動的に増えていきます。 console.dir オブジェクトのプロパティの中身をログに出力します。 console.dirxml HTMLとかXMLの要素を渡すと、下の要素が全部見れるようになります。 console.group、conosle.group
[JavaScript]JSON的なダンプをとる関数を作ってみた - 考え得る最高を常に行う
IEでデバックをするとFirebugみたいにオブジェクトを展開してみたかったので作ってみた。 特徴は。 インデントのオンオフ。 プロパティ(キー)のソートのオンオフ 関数のソース表示切り替え 変数(オブジェクト)が参照が深い場合の制限(制限を超えるとthrowされる) コード var dumpJson = function(v, opts){ var _opts={ksort:false, indent:false, funcsrc:false, undefined2str:false, maxDepth:10}; for(var k in opts) _opts[k]=opts[k]; var d=parseInt(_opts.maxDepth); _opts.maxDepth=(d>0)?(d<100)?d:100:1; var f1=(!!_opts.indent)?function
![[JavaScript]JSON的なダンプをとる関数を作ってみた - 考え得る最高を常に行う](https://cdn-ak-scissors.b.st-hatena.com/image/square/d5f5f3e1c12cba18186d8ebb6f9fa6a836128bf6/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F17680117127091821896%2F17680117127091828809%2F1556526106)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【2019年4月版】JavaScriptのconsoleがすごいことになってた。 - Qiita
大手Webサービスがクライアント側で発生したJavaScriptのエラーをどう収集しているのか まとめ - Qiita
Post by @jxck
Google Services(Google Spreadsheet & Google Apps Script & goo.gl & Google Calendar)を使った個人開発メモ - Qiita
ソニック速報