console.log(); しか使えなかった自分へ。。。 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
はじめに Webフロントエンド開発の学習において、多くの人がまず最初にconsole.logの使い方を学びます。 console.logはデバッグの際に非常に便利なツールですが、JavaScriptにはこれ以外にも多彩なデバッグ機能が存在します。 通常のconsole.logだけでなく、さまざまなconsoleのメソッドを活用することで、デバッグ作業をより効率的に、かつ迅速に進めることができます。 console.log ブラウザの開発者ツールやNode.jsのコンソール上に、渡された引数を表示します
JavaScript を書いたことがある人ならば一度は使うであろう console.log ですが、この関数は思ったよりも厄介な性質を持っています。その性質を知らずに console.log を使うと、デバッグ時に大ハマリしてしまうことがあります。この記事では console.log の落とし穴についてお話します。 今回は Chrome に特化して解説しますが、Firefox や Safari でも同じ落とし穴があります。 console.log とは まずはさらっと基本をおさらいしましょう。 大前提なのですが、console.log は JavaScript の言語仕様（ECMAScript）で定義されていません。ブラウザ向けには whatwg の仕様がありますが、あくまでもそれはブラウザ向けの仕様であり、Node.js を含むほぼ全ての JavaScript 環境で使えるのは cons
Logpointsを使おう Webフロントエンドの開発をする際、デバッグ目的で「特定の処理が実行された」ということを確認するために console.log() を使うことは多いと思います。しかし、Google Chrome や Microsoft Edge で利用可能な Logpoints を利用することで、 console.log() を使わずともコンソールにメッセージを出力することが可能です。 なぜLogpointsを使うの？ Logpoints を使うのには以下のメリットがあります。 デバッグや動作確認のためにコードを変更する必要が無い console.log() を誤ってcommitに含めてしまう心配が無い console.log() を入れた後に再ビルドやホットリロードを待つ必要が無い どうやってLogpointsを使うの？ logpoints は以下のように使用します。 Chr
はじめに フロントエンドのWeb開発においてconsole.log()というのは非常によくお世話になります． しかしconsoleオブジェクトにはには他にもたくさんのインスタンスメソッドがあり，それらを使わずに開発を行うのは少しもったいないです． この記事では様々な機能を紹介していき明日から開発で使用していただければ嬉しいです． assert console.assert()は第一引数に論理式をとり，第二引数以降には任意のオブジェクトを取ります． 第一引数がfalseとなった場合，第二引数をコンソールに出力します． サンプル // assert const wishToSuccess = () => { return Math.random() < 0.5 } console.assert(wishToSuccess(), "失敗しました") 出力 log 一般的にログを出力するconso
Beyond Console.log() – Level up Your Debugging Skills — SitePoint
Stay Relevant and Grow Your Career in TechPremium ResultsPublish articles on SitePointDaily curated jobsLearning PathsDiscounts to dev toolsStart Free Trial7 Day Free Trial. Cancel Anytime. You may have established a pattern of coding that utilizes a few key tools offered by your browser’s console. But have you dug any deeper lately? There are some powerful tools available to you, and they might j
はじめに みなさんは Console Ninja というツールをご存知でしょうか？ 個人的にはフロントエンドを書く上で、1,2を争うほど有用なツールかと思うのですが、意外にしられていないため、布教するための記事を書きました。 昨今、AIが流行し、概ねAIにコードをかかせる時代で我々がする仕事はdebugぐらいなのではないでしょうか。そんなときにConsole Ninjaはとっても役に立ちます。 console.logをフロントエンドに埋め込み、コードを修正しているあなた。最初は無料ですので、ぜひ使用してみてください。 Console Ninjaとは？ Console Ninja公式サイト によると、 VS Code 上で console.log の出力を直接エディターに表示できる拡張機能 です。 従来はブラウザの DevTools を開いて F12 → コンソールを確認していましたが、 C
Console Ninja VS Code extension allows you to see console.log output and runtime errors right next to your code.
Level up your JavaScript browser logs with these console.log() tips
Level up your JavaScript browser logs with these console.log() tips I consider myself a backend software engineer - and as any backend engineer would attest, a large part of our life is spent monitoring, troubleshooting, and debugging our applications. The fundamental rule of software development is that software will fail - what separates new developers from experienced ones is how they plan for
JavaScript開発において、console.logはデバッグや情報表示に欠かせないツールです。本記事では、console.logの基本的な使い方から、スタイリッシュな出力方法、そして構造化データの確認まで、3つの活用法を紹介します。 その１ 基本ログ：デバッグの最初の一歩 console.logは、変数や関数の結果を確認する基本的な方法です。コードがどのように動作しているかを追跡するのに便利です。 例: const userName = "Alice"; console.log("User Name:", userName); // User Name: Alice ポイント: 複数の値をカンマで区切ることで、コンパクトに情報を表示可能。 エラーが発生している箇所を特定するための第一歩として役立つ。 console.error()やconsole.warn()を使うと強調できたりする
本記事は、Harsha Vardhan氏による「Stop Using console.log() In JavaScript」（2020年10月25日公開）の和訳を、著者の許可を得て掲載しているものです。 JavaScriptでconsole.log()を使うのはやめよう もっと良い選択肢がある Photo by Hugo Rocha on Unsplash はじめに あなたは、console.log()をコードのデバッグによく使うJavaScript開発者ですか？それには何の問題もありません。でも、知らないかもしれませんが、consoleオブジェクトには他にも驚くべきメソッドが沢山あります。この記事では、その効果的な使用方法について説明したいと思います。 consoleオブジェクトを使用する理由 JavaScript の consoleオブジェクトは、ブラウザのデバッグコンソールにアクセ
WeakRef と console.log
ES2021 に入った WeakRef を実験したらハマったのでメモ WeakRef - JavaScript | MDN WeakRef: JavaScriptに弱参照がやってくる（ついでにFinalizationも） - Qiita tl;dr devtool を開いた状態で console.log すること自体が参照になる WeakRef で取得した参照を console.log すると、それも参照なので、本来開放されるはずでもリソースの開放が行われなくなる 循環参照オブジェクトでも、内部での循環参照に閉じてる限りちゃんと捨てられる(少なくともv8は) 確かめたこと 循環参照のオブジェクトの GC がなされず困っていたので、確認のために色々と実験していた。 まず、循環参照オブジェクトを作る。この Node は再帰的に辿れるように、 parent と children で相互に参照を持
この記事の対象者 エディタ: IntelliJ(2023.3.4 Ultimate Edition) TypeScript・JavaScript以外の言語も触ったことがある人 console.log()をタイピングしているつもりがついうっかりprint()とか書いちゃう人 そもそもconsole.logってタイピングが長いと思っている人 console.logとか出すんじゃなくてデバッグすればよくね？ってツッコミが来そうですが、 コーディング初心者なんです、慈悲をください〜🔰 結論 IntelliJのスニペット機能、 Live Templatesに好きな形で登録して幸せになろう！ スニペットの一例↓(細かい設定は後述) console.log("🚀====$FILENAME$: L: $NO$ ====🚀") console.log("$VARIABLES$: ", $VARIABL
Use console.log() like a pro
Using console.log() for JavaScript debugging is the most common practice among developers. But, there is more… The console object provides access to the browser’s debugging console. The specifics of how it works vary from browser to browser, but there is a de facto set of features that are typically provided. I share a ton of JavaScript tips on Twitter, so be sure to check out my profile. console.
console.log()はオブジェクト参照という話
はじめに 人によってはすごく当たり前のことかもしれませんが、タイトルの通りconsole.log()はオブジェクト参照です。なので参照元の値が変化すれば出力される値も変化します。 Chrome や Firefox の比較的新しいバージョンを使っているなら注意が必要です。これらのブラウザーで記録されるのはオブジェクトへの参照です。そのため、 console.log() を呼び出した時点でのオブジェクトの「値」が表示されるのではなく、内容を見るために開いた時点での値が表示されます。 引用: https://developer.mozilla.org/ja/docs/Web/API/console/log#引数 試してみる 実際にオブジェクト参照になる挙動や対処法を試してみます。 オブジェクト参照の出力 オブジェクト参照か試してみます。 1回目出力と2回目出力の間にfirstNameをyamam
$ node > const obj = { hoge: { fuga : 1, piyo: { foo: 10, bar: { a: 100, b: { c: 1000 } } } } }; > console.log(obj); { hoge: { fuga: 1, piyo: { foo: 10, bar: [Object] } } } > console.log(JSON.stringify(obj)); {"hoge":{"fuga":1,"piyo":{"foo":10,"bar":{"a":100,"b":{"c":1000}}}}} > console.dir(obj, {depth: null}); { hoge: { fuga: 1, piyo: { foo: 10, bar: { a: 100, b: { c: 1000 } } } } } > console.log
![console.logで[Object]が出たときはconsole.log('%o', obj)という選択肢もある](https://cdn-ak-scissors.b.st-hatena.com/image/square/40c6ee5040165e6b338e70435cd72aaf1924f0c5/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--tFw9QvKY--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3Aconsole.log%2525E3%252581%2525A7%25255BObject%25255D%2525E3%252581%25258C%2525E5%252587%2525BA%2525E3%252581%25259F%2525E3%252581%2525A8%2525E3%252581%25258D%2525E3%252581%2525AFconsole.log%252528%252527%252525o%252527%25252C%252520obj%252529%2525E3%252581%2525A8%2525E3%252581%252584%2525E3%252581%252586%2525E9%252581%2525B8%2525E6%25258A%25259E%2525E8%252582%2525A2%2525E3%252582%252582%2525E3%252581%252582%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Akazuph%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzFjNmY3ODBlZDYuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
Node.js の console.log() で [Object] とかの中身を見る方法 | キリウ君が読まないノート
ていうかそもそも console.log() じゃなくて console.dir(obj, { depth: null }) を使う。 JSON文字列でよければ、JSON.stringify(obj, null, 2) の戻りを console.log() で出すと綺麗にフォーマットできる。 console.log() は、ネストになってるオブジェクトを2階層下までしか展開表示しない。それより下は [Object] とか [Array] みたいに表示される。 ネストが深い例const obj = { fn: () => {}, aaa: undefined, bbb: ['1階層下'], ccc: { ddd: ['2階層下'], eee: { fff: ['3階層下'], ggg: { hhh: ['4階層下'], iii: {} } } } }; console.log(obj);実行
![Node.js の console.log() で [Object] とかの中身を見る方法 | キリウ君が読まないノート](https://cdn-ak-scissors.b.st-hatena.com/image/square/a6fa63abd26c46dda14a6ffc3a68caa3d2b16c82/height=288;version=1;width=512/https%3A%2F%2Fnote.kiriukun.com%2Fapple-touch-icon.png){kind=icon}
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
本日は 7/7、クラスメソッド創立記念日です（ちなみに私の結婚記念日でもあります）。ということで、ちょっとした小ネタ投稿になります。 console オブジェクト console オブジェクトはよく使うのですが、私が使うメソッドは主に以下になります。 console.log() - 毎日使う console.error()- エラーのとき使う console.info() - log が多すぎて埋もれてどこに行ったかわからなくなったときに使う（正しい用途ではありません。でもすぐ消すし……） console.table()- 思い出したとき、すごくまれに使う。最近は、console.log({ foo }) で済ませている これくらいしかほとんど使うことがありません。使う比率でいうと console.log が 9 割以上を占めている感じです。なので、この機会にもう少しだけ console.
console.log()が面倒ならDevToolsでログポイントを設置する（ひとり DevTools Advent Calendar 2020 – 04日目） | Ginpen.com
4 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 デバッグ時に console.log() は大変便利でよく使ってるんですが、DevTools を使うとコードを書き換えることなく同じことをやれます。 毎回スクリプトを書き直し→（ビルド待ち）→画面再読み込みする手間が省けて良いですね。 手順は簡単。 DevTools の Scripts パネルを開く 目的の JS ファイルを開く (CTRL+P) 出力したい位置の行番号を右クリックし “Add logpoint…” を選択 出力する内容を記述 スクリプトを実行（ボタンを押すとか） 編集したい場合も行番号を右クリックからやります。 DevTools のログポイントを編集する様子。行番号を右クリックして追加、編集。 設置すると、Chrome の場合は赤紫の矢印的なものが行番号の上に表示さ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
![console.logでJSON形式の値が[object Object]になる時 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/bbab5452662b9c6730c95ba24e4c73d849aa83f0/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9Y29uc29sZS5sb2clRTMlODElQTdKU09OJUU1JUJEJUEyJUU1JUJDJThGJUUzJTgxJUFFJUU1JTgwJUE0JUUzJTgxJThDJTVCb2JqZWN0JTIwT2JqZWN0JTVEJUUzJTgxJUFCJUUzJTgxJUFBJUUzJTgyJThCJUU2JTk5JTgyJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0wZWM4ODIwNDQ5NWY1YmU1OTc2YWNkMTFmZGYyODhmZg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBjYW1vbWlsZV9jYWZlJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1iNjBlMmIwMWM1OTVlZDFjYjA0ZmI2ZDczNDM2MTE1OA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dba8db6b08e5e151023a5a2835c6a73b4)
React(next.js)とかで開発してる時に深い階層のObjectデータをデバッグ用に吐き出すならconsole.log()ではなく、console.dir() - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
console.logについて理解していますか？
はじめに console.log()を使っていますか？ コンソールデバッグをしない派の人もまったく使わないことはないでしょう。
はじめに 普段、一面の白いconsole.logを見て、イライラしたり、重要な情報を一目で見つけるのが難しいと感じたことはありませんか？今日は、console.logをカラフルに変える方法を皆さんに共有します。 クラスの実装 class ColorfulLog { export const success = (msg: string) => { console.log("\x1b[32m%s \x1b[0m", `SUCCESS: ${msg}`); }; export const error = (msg: string) => { console.log("\x1b[31m%s \x1b[0m", `ERROR: ${msg}`); }; export const warning = (msg: string) => { console.log("\x1b[33m%s \x1b[0m
タイトルの通りです。 「そんな状況ないよ」っていう人は羨ましいです。「require とかできねえんだけど」っていう人は残念でした。 function log(value) { require("fs").appendFileSync( path.join(hogePath, "log.txt"), "[main thread " + new Date().toString() + "]" + "\n " + value + "\n" ); }
【設定方法】Next.jsでterser-webpack-pluginを設定し本番ビルド時にコメントとconsole.logを削除するサンプルコード Next.jsで作ったアプリケーションの コメントとconsole.logを本番ビルド時に削除したかったため terser-webpack-pluginをインストールして設定したので 手順としてやり方をメモします。 terser-webpack-pluginとは tenrserを利用して JavaScriptを圧縮するWebpackのプラグインになります。 UglifyJSが非推奨 もともとuglifyjs-webpack-pluginというプラグインもあったのですが 非推奨になったようなので今後の選択肢としてtenrserを利用します。 環境 React 17.0.2 Next.js 7.0 必要なパッケージのインストール terser-w
ブラウザ上でのデバッグにconsole.log()をよく使いますが、MDNのConsole APIのページを見ると色々ありましたので調べてみました。 よく使うコンソールメソッド console.log()： ログ情報の一般的な出力用。 console.info()： 有益な情報の出力用。 console.warn()： 警告メッセージの出力用。 console.error()： エラーメッセージの出力用。 console.log()のカスタムCSSスタイル console.logの引数にCSSを指定し、%cディレクティブを使用すると出力結果にスタイルを適用できます。 ディレクティブの前のテキストは影響を受けず、ディレクティブの後ろのテキストが装飾されます。 文字列の置換 文字列を受け取る console オブジェクトのメソッド (log() など) の 1 つに文字列を渡す場合、次の置換文
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptでconsole.logを使用してませんか？
Chrome の console.log でハマらないために
console.log() の代わりにdevtoolsのLogpointsを使う - Qiita
console.log()だけのデバッグはやめよう
フロントでconsole.logを埋め込むならconsole Ninjaも使おうぜ！
Console log output right next to your code
【JavaScript】console.logの3段活用で開発効率UP
JavaScriptでconsole.log()を使うのはやめよう - Qiita
console.logって打つの面倒だよねって話 - Qiita
console.logで[Object]が出たときはconsole.log('%o', obj)という選択肢もある
console.logだけではないconsoleの使い方 - Qiita
console.log を装飾してみよう | DevelopersIO
console.logでJSON形式の値が[object Object]になる時 - Qiita
Node.jsでカラフルなconsole.logを使おう！ - Qiita
どこに console.log されるかわかんないしデバッガーとか無理！っていうときに使うログ
【設定方法】Next.jsでterser-webpack-pluginを設定し本番ビルド時にコメントとconsole.logを削除するサンプルコード | 記事 | とあるクリエイターのエンジニアブログ | T-CREATOR
console.logをもっと使いこなす！ - Qiita