デバッグしやすい書き方が掴めてきた気がする - Qiita
最近『セイト先生が教えるプログラミング入門』でJavaScriptの勉強に取り組んでいます。その中でデバッグしやすい書き方が少しだけ掴めてきた気がします。 デバッグ1 まず、第5章第13節「非同期処理を可能にするPromiseオブジェクト」の「Promiseとは」（pp.275-277）でPromiseオブジェクトを使った関数の例（foo）が紹介されていたのですが、1-10 & 12-16行目の { } 内が少し長かったためか、 （p.275. コード12-16行目. { }内は省略） のところで、fooの後ろに書くべき () が抜けていたことに気付かず、全体をハイライトしてctrl + shift + LでCursorのAIに聞いてみてもどこがおかしいのか自分にはよく分かりませんでした。そのためしばらく苦戦していたのですが、最終的に下記のような形で細かく関数を定義することを思いつきました
初心者向けのデバッグ術 - Qiita
はじめに この記事を書くきっかけは、あるページのsvg図のアニメーションに不具合があり、修正したいと思ったことです。不具合の内容として、SVG図が読み込み終わっていない場合、10回に1回は空白で表示されることがありました。 この問題を解決するための考え方を共有したいと思います。 デバッグのステップ 1. 問題を明確にする まず、問題を把握することが重要です。今回の場合： サイトを再読み込むと、世界地図のSVGが正常に表示されない 画像読み込み前にDOM要素は空白で表示される 10回くらいに1回程度の頻度で発生 2. 問題を分解する 大きな問題を小さな部分に分けて考えましょう。今回の例では、以下のように分解して考えました： 画像の読み込み アニメーションの実行 3. 仮説を立てる 問題の原因について、ブレインストーミングでいくつかの仮説を立てます。 SVG画像の読み込みの実装方法 アニメーシ
BlazorでJavaScriptから.NETの動的(インスタンス)メソッドを呼び出す - Qiita
はじめに 仕事で作成しているBlazorのアプリケーションで、Handsontableを使用して一覧表を表示しています。 検証作業を実施している同僚から、2台のPCで同じ画面を表示した際に一覧表を表示する処理を実施すると、後から起動したPC側に一覧表が表示され、本来表示されるPC側には何も表示されないとの報告を受けました。 土日の休日を使って解決策を見つけることが出来たので、備忘録として記事に残しておきます。 問題1 現象 会社では複数PCが使用できますが、自宅ではPC1台です。 そこで、違うブラウザChromeとEdgeで同じ現象が出るか試してみました。Visual Studio上で Chromeを起動しておき、後からEdgeを起動して、一覧表を表示する処理を実施するとEdge側に一覧表が表示されました。 これなら Visual Studio上から デバッグ も可能で調査が進みます。 調
console.logって打つの面倒だよねって話 - Qiita
この記事の対象者 エディタ: 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
ブラウザ上でデバッグするときに使えるテクニック
ウェブ上でJavaScriptを実行してバグが発生した場合、ブラウザに内蔵されている開発者ツールを使ってデバッグすることがよくあります。そうしたブラウザでのデバッグにおいて役立つテクニックをNetflixでフロントエンドの開発に携わっているアラン・ノルバウアーさんがまとめています。 67 Weird Debugging Tricks Your Browser Doesn't Want You to Know | Alan Norbauer https://alan.norbauer.com/articles/browser-debugging-tricks ◆高度な条件付きブレークポイント 開発者ツールの「ソース」タブにはデバッガーが用意されており、JavaScriptの任意の行にブレークポイントを設定することで実行を一時停止して変数やコールスタックの中身を確認できます。ブレークポイントを
console.log() の代わりにdevtoolsのLogpointsを使う - Qiita
Logpointsを使おう Webフロントエンドの開発をする際、デバッグ目的で「特定の処理が実行された」ということを確認するために console.log() を使うことは多いと思います。しかし、Google Chrome や Microsoft Edge で利用可能な Logpoints を利用することで、 console.log() を使わずともコンソールにメッセージを出力することが可能です。 なぜLogpointsを使うの？ Logpoints を使うのには以下のメリットがあります。 デバッグや動作確認のためにコードを変更する必要が無い console.log() を誤ってcommitに含めてしまう心配が無い console.log() を入れた後に再ビルドやホットリロードを待つ必要が無い どうやってLogpointsを使うの？ logpoints は以下のように使用します。 Chr
大規模な移行バグを修正するための戦術 - Qiita
こう見たとき、"FileNotFound"のバグが一番多い。と分かりました。そうすると、"FileNotFound"のバグを修正すると、多くの移行エラーが解消され、効率よく移行が進むと考えられます。しかし、現実問題として、それほど直りませんでした。 "簡単なバグ"とは何か？ 前節では、バグの発生頻度が高いものから修正していくとアプローチをしていきましたが、実際問題それほどうまくいきませんでした。端的に、なぜ失敗したか。というと、"バグが直らなかった"からです。仮に"FileNotFound"のバグを直そうとしたとき、2,520個あるログファイルから、ランダムに1つとりだし、どの部分でエラーになっているのかを細かく見ていきます。それで、バグの原因を特定し、直す。という極シンプルなアプローチをするわけですが、「このバグの原因を特定する」ということが、そもそも難しかった。ということです。先にも書
君はVS Codeのデバッグの知られざる機能について知っているか - Qiita
はじめに こんにちは、kenです。 GWに「暇だな～～、こんな日はVS Codeの公式ドキュメントを読むか！w」と思って何気なく読んでたらデバッグに関して知らない機能がいくつかあったので、今回はそれをご紹介したいと思います。 おそらく今から紹介する機能はあまり知られてないと思います。もし全部知ってたらVS Code完全理解者なので誇ってください。（！？） 以下に記載する内容はVS Codeの公式ドキュメントのDebuggingという章を参考にしています。 注意 これから紹介する機能は言語によって使えたり、使えなかったりします。 今から紹介する機能のデモはすべてPythonで行おうかと思ったのですが、上記の理由からPythonではサポートされていない機能についてはJavaScriptやC++で代用しました。 デバッグで使える便利な機能 ログポイント機能 行を指定しログポイントを追加すると、そ
console.log()だけのデバッグはやめよう
はじめに フロントエンドのWeb開発においてconsole.log()というのは非常によくお世話になります． しかしconsoleオブジェクトにはには他にもたくさんのインスタンスメソッドがあり，それらを使わずに開発を行うのは少しもったいないです． この記事では様々な機能を紹介していき明日から開発で使用していただければ嬉しいです． assert console.assert()は第一引数に論理式をとり，第二引数以降には任意のオブジェクトを取ります． 第一引数がfalseとなった場合，第二引数をコンソールに出力します． サンプル // assert const wishToSuccess = () => { return Math.random() < 0.5 } console.assert(wishToSuccess(), "失敗しました") 出力 log 一般的にログを出力するconso
JavaScriptでconsole.log()を使うのはやめよう - Qiita
もっと良い選択肢がある Photo by Hugo Rocha on Unsplash はじめに あなたは、console.log()をコードのデバッグによく使うJavaScript開発者ですか？それには何の問題もありません。でも、知らないかもしれませんが、consoleオブジェクトには他にも驚くべきメソッドが沢山あります。この記事では、その効果的な使用方法について説明したいと思います。 consoleオブジェクトを使用する理由 JavaScript の consoleオブジェクトは、ブラウザのデバッグコンソールにアクセスし、コードで使用した変数の値を出力できます。多くの場合、正しい値がコードに渡されているかデバッグするために使用します。 ほとんどの開発者は、console.log()を使用してブラウザコンソールに値を出力したことがあると思います。logは、consoleオブジェクトの1メ
Visual Studio CodeでのJavaScriptのデバッグ方法 - ICS MEDIA
マイクロソフトが無償で提供しているコードエディター「Visual Studio Code（略称：VS Code）」はGoogle ChromeやMicrosoft Edgeのデバッグ機能と連携できます。VS Code上でブレークポイントを設定してコールスタックを確認したり、ステップ実行や変数のウォッチなどを行えます。複雑なJavaScript開発を行っている方は、デバッグ機能を使うことで、効率のよい開発体験を得られるでしょう。 本記事ではデバッグ機能を使うためのVS Codeの導入方法について説明します。 導入手順と前提 VS Codeにはデフォルトでデバッグ機能が搭載されています。 ※2021年8月以前のVS Codeでは拡張機能「Debugger for Chrome」の導入が別途必要でしたが、今のVS Codeでは拡張機能をインストールする必要はありません。 本記事では、ウェブページ
VBScript(VBS)をVisual Studio 2019でデバッグする方法の覚え書き
VBScript(VBS)をVisual Studio 2019 2017でデバッグする方法です。 2021/8/9追記： VS2019でも全く同じ手順でデバッグできることを確認しました。 VBScript用のプロジェクト作成 プロジェクトの種類を 他の言語 – Visual C++ – その他 – メイクファイル プロジェクト を選択します。 もし上記のプロジェクトが見つからない場合、再度インストーラーに戻り、C++関連を追加してください。 C++ – その他 – メイクファイルが見つからない時の対処法 名前と場所は任意で付けます。（図は2017の場合） VS2019の場合 プロジェクトの設定 ここから先はVS2017もVS2019も全く同じです。 何も入力も、変更もせず完了をクリックします。 プロジェクトエクスプローラから赤丸で囲ったフォルダを右クリックして削除します。 カーソルで選ん
Bash シェルスクリプトのデバッグや入力補完ができる Visual Studio Code 拡張機能（WSL2,mac,Linux対応） - Qiita
Bash シェルスクリプトのデバッグや入力補完ができる Visual Studio Code 拡張機能（WSL2,mac,Linux対応）ShellScriptBashdebugVSCodeWSL2 シェルスクリプトにも統合開発環境を Bash のシェルスクリプト (shell script) は Linux はもちろん mac や Windows でも動作します。 シェルスクリプトの文法にはかなりクセがありますが、仕様が安定しているために移植する必要がないという大きなメリットがあります。ただ、一般的なプログラミング言語と異なり、デバッガーが使えないため期待した動作と異なるときに動きが分かりづらいという弱点がありました。 しかし、それはもう過去の話です。 Visual Studio Code の Bash Debug 拡張機能を使えば、シェルスクリプトでもステップ実行や環境変数の値のウォッ
Chrome の console.log でハマらないために
JavaScript を書いたことがある人ならば一度は使うであろう console.log ですが、この関数は思ったよりも厄介な性質を持っています。その性質を知らずに console.log を使うと、デバッグ時に大ハマリしてしまうことがあります。この記事では console.log の落とし穴についてお話します。 今回は Chrome に特化して解説しますが、Firefox や Safari でも同じ落とし穴があります。 console.log とは まずはさらっと基本をおさらいしましょう。 大前提なのですが、console.log は JavaScript の言語仕様（ECMAScript）で定義されていません。ブラウザ向けには whatwg の仕様がありますが、あくまでもそれはブラウザ向けの仕様であり、Node.js を含むほぼ全ての JavaScript 環境で使えるのは cons
初心者プログラマーに伝えたいデバッグの話 - Qiita
開発のほとんどはデバッグですが、デバッグのやり方をしっかりと教わることはあんまりないと思うので、開発初心者向けにデバッグの考え方をまとめてみました。 TL;DR ベテラン開発者にとっても、開発のほとんどはデバッグ。デバッグの効率を上げることで、開発効率が上がります。 「無闇に検索」や「漠然とコードを眺める」ではバグは解消されません。細かく実行し、観察しましょう。 バグの原因は自分の勘違いかもしれません。自分の理解も客観的に観察すると、効率よくバグが解消できます。 初めに：開発のほとんどはデバッグ 初心者で開発をしていると、「ずっとデバッグしてるな」と落ち込むかもしれません。先輩エンジニアが綺麗な動くコードを量産してるのに、自分が書いたコードはエラーを吐き続け、全然思い通りに動かなかったり。 先輩エンジニアも最初から完璧なコードを書いている訳ではありません。初心者プログラマーと同じように、バ
DevToolsのconsoleを介してイベントと関数呼び出しを監視する - Qiita
ブラウザのconsole.logは処理の状態を理解するのに便利です。 私もいつもconsole.logデバッグを使っています。 Chromeにはもっと便利なmonitorEventsとmonitorがあり、イベントが発生したり関数が呼ばれたりするたびにログを取得することができます。 Monitor Events monitorEventsに要素と一連のイベントを渡して、イベントが発生したときにコンソールログを取得します。 // クリックイベントを監視 monitorEvents(window, 'click') // 上キー、下キーイベントを監視 monitorEvents(document.body, ['keyup', 'keydown']) // スクロールイベントを監視 monitorEvents(window, 'scroll')
console.logをもっと使いこなす！ - Qiita
ブラウザ上でのデバッグに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ページを開く
Visual Studio 2022のデバッグ設定に【外部プログラムの開始】の選択肢が見付からない 【▲→川俣晶の縁側→ソフトウェア→技術雑記】
JavaScriptでconsole.logを使用してませんか？
デバッガと和解せよ
