console.log()だけのデバッグはやめよう
はじめに フロントエンドのWeb開発においてconsole.log()というのは非常によくお世話になります． しかしconsoleオブジェクトにはには他にもたくさんのインスタンスメソッドがあり，それらを使わずに開発を行うのは少しもったいないです． この記事では様々な機能を紹介していき明日から開発で使用していただければ嬉しいです． assert console.assert()は第一引数に論理式をとり，第二引数以降には任意のオブジェクトを取ります． 第一引数がfalseとなった場合，第二引数をコンソールに出力します． サンプル // assert const wishToSuccess = () => { return Math.random() < 0.5 } console.assert(wishToSuccess(), "失敗しました") 出力 log 一般的にログを出力するconso
GitHub Actions のデバッグをローカルで行う
概要 GitHub Actions で GitHub ホストランナーを使用する場合、パブリックポジトリは無料ですがプライベートリポジトリは従量課金（無料枠あり）です。 ワークフローを編集する際にデバッグしていると結構な時間を消費してしまいます。 そこでデバッグ時は GitHub ホストランナーを使わずに無料で実行する方法を 3 種類紹介します。 nektos/act 言わずと知れたローカル実行ツールです。 すべてを再現することはできませんがコミットを増やさずにデバッグができます。 注意点 ubuntu-* のみサポート ソフトウェアは指定する Docker イメージ依存、デフォルトのイメージだと色々足りないので -P で指定 secrets.GITHUB_TOKEN が未定義なので Personal Access Token を発行し設定が必要 サービスコンテナ services が使えな
ChromeのデベロッパーツールでJSをデバッグする方法(2022年版) - ICS MEDIA
JavaScriptのデバッグは、ウェブ開発の必須スキルのひとつです。プログラムの実行をデバッグすることで、現在の変数の値や、処理がどのように進んでいるのかを確認できます。デバッグによってプログラムが意図した動作になっているかの分析に役立てられます。 本記事ではGoogle Chromeブラウザーの「Chrome Developer Tools」（以下「デベロッパーツール」、「DevToolsデブ・ツールズ」という略称もあります）を使用してJavaScriptをデバッグする際の基本的な使い方を解説します。「今までデベロッパーツールを使ったことのない」という方でもこの記事を読めば理解できるよう、チュートリアル形式になっています。20分ほどで理解できるようまとめているので、順番に試しながら読み進めてください。 この記事で学べること デベロッパーツールの使い方 JavaScriptのブレークポイ
VSCodeで音声読み上げでの文章デバッグする拡張 - vscode-read-aloud-text
vscode-read-aloud-textという文章を読み上げるVisual Studio Codeの拡張機能を作りました。 azu/vscode-read-aloud-text: VSCode extension that read aloud text like Markdown and text etc… Read Aloud text - Visual Studio Marketplace vscode-speechを元にしていますが、vscode-read-aloud-textは文章の構造をパースしてから読み上げたり、読み上げている部分をハイライト表示する機能が追加されています。 Markdownなどをパースして、コードブロックなどは読み上げない textlintのプラグインを再利用してるので、現在対応しているのはMarkdown、Txt、Re:Viewのみ 読み上げるのはHe
FromJS - Webアプリケーションの理解を容易にするChrome機能拡張 MOONGIFT
JavaScriptで大型なWebアプリケーションが開発されるのに合わせて、全体を把握するのが困難になってきています。表示されている文字がサーバサイドから出力されているものでない場合、どこで作られたデータなのかを追いかけるのも大変です。 そこで使ってみたいのがFromJSです。Webアプリケーションの内容を把握するのに役立つツールです。 FromJSの使い方 中央にあるのがFromJSです。DOMエレメントについて表示されます。 そして表示されている文字を選択すると、それがどこで生成された文字なのかが一目で分かります。 FromJSはすべてのWebサイトで使える訳ではなく、かなり限定されたWebアプリケーションでの利用になるようです。その文字がJavaScriptの変数によるものなのか、localStorageによるものなのかなど、出所が分かるだけでもデバッグがかなり容易になることでしょう
正規表現をサッと確認するのに重宝した神サイトを紹介してみる | DevelopersIO
はじめに こんぬづは、ゲーム用のPCを東京に置いているため、実家に帰ってくるとゲームができなくてしんどい田中です。こういうときに限って、ゲームの実況動画を見てしまったりして余計に心を痛めています。 さて今回は、今年正規表現をサッと確認するのに重宝した Regexper を紹介します。 Regexper こんなサイトです。とてもシンプル。 以下のような特徴があります。 正規表現を図で表示してくれる 表示した図をダウンロードできる 正規表現を図で表示してくれる 入力欄に正規表現を入力して、Displayボタンを押すと、以下の画像のようにその正規表現のパターンを図示してくれます。 どんな範囲でパターンマッチしてくれるのかがとても見やすくなります。 表示した図をダウンロードできる 入力欄の右下にあるDownloadボタンを押せば、表示した図をダウンロードすることができます。 例えば正規表現の仕様を
知っておくとかなり便利！Chromeのデベロッパーツールであまり知られていない実用的な機能とテクニックのまとめ
Chromeのデベロッパーツールは、Web制作に欠かせないといっても過言ではありません。DOMインスペクター、スタイルパネル、JavaScriptコンソールなど基本的な機能だけでも便利ですが、さらに便利になる機能も数多くあります。 デベロッパーツールを使って、Webページやアプリの制作・デバッグのワークフローが大きく改善される実用的で便利な機能とテクニックを紹介します。 Mastering Chrome Developer Tools: Next Level Front-End Development Techniques 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ダークテーマ 02. 要素をすばやく選択できる選択モード 03. グローバル変数として格納 04. アニメーション用のツール 05. 要素の疑似状態をシ
他人の書いたソフトウェアのバグへの対処例 - Qiita
はじめに 本記事は、他人の書いたソフトウェアのバグに遭遇したときにどうするかという流れを、実例を基にして、ストーリー仕立てでなるべく具体的に書きました。このようなときの対処に不慣れな人に、実際のデバッグ、バグレポート、および修正案の提出までの流れを掴んでもらうことが目的です。 バグに遭遇 筆者も参加していたLinux Advent Calendar 2016に、ある日シェルスクリプト（Bash）で作るTwitterクライアントという記事が投稿されました。twitter APIの認証に使われているOAuth1.0aとshell芸に興味があったことより、この記事を読んでみることにしました。 そこで紹介されているtweet.shというbash製twitterクライアントを試そうとしたところ、出力は次のようになりました。 いきなり何かがおかしいです。自分のtwitterアカウントに関するJSON形
【Python】いつまでprintデバッグで消耗してるの？ - らっちゃいブログ
Python を初めて間もない頃、自分も print デバッグしてました。効率の悪さを認識しつつも、IDEを導入してデバッグする方法を調べてセッティングして、という手順が面倒でずっと放置してました。 // 普段は vim で開発してます そうこうしてたら print デバッグではどうにもならないバグにぶち当たり、仕方なくデバッグポイントを置く方法を調べたわけです。するとどうでしょう。 ソースコード中に以下の一文を入れるだけではないですか。 import pdb; pdb.set_trace() たったこれだけで、上の一文を挿入した行で処理が停止し、コンソール上でステップ実行が出来るようになります。最高かよ。 個人的にですが、デバッガー起動中によく使うコマンドとしては以下です。 コマンド 説明 s(tep) ステップイン n(ext) ステップオーバー r(eturn) ステップアウト l(
Eclipse スクラップブックの便利な使い方 | Eclipse | 開発環境／開発ツール
eclipseのスクラップブック・ページを使うと、断片的なコードを実行することができます。 メソッドコールや自分のコードをクラスに組み込む前に動きを確かめるなど、何か思いついたときにすぐに使える、なかなか便利なもの。 実はこの「なかなか」なスクラップブック・ページは、開発中に「かなり」便利に使える強力なツールにもなるのです。 関連記事： OutOfMemoryErrorの原因と対応(1) NoClassDefFoundErrorの原因と対応(1) SimpleDateFormatのマルチスレッド問題 まずは動かしてみる 百聞は一見にしかず。スクラップブック・ページを使ったことのない方はまずは動かしてみましょう。 操作は、Javaプロジェクト上で「新規」－「その他」－「Javaの実行/デバッグ」－「スクラップブックページ」を選び適当なファイル名をつけて終了。 「.jpage」という拡張子のテ
JavaScriptのデバッグのコツと技 | POSTD
以前の記事で、 Webアプリケーションのデバッグの仕組み について触れました。今回は実践的なJavaScriptのデバッグについて掘り下げていきたいと思います。 ブラウザデベロッパツール 私の個人的なお気に入りはChromeデベロッパツールです。SafariやFirefoxはChromeほどの高水準に達していません。しかし、徐々に改善されてきています。FirefoxにはFirebugと改良されたFirefoxデベロッパツールが組み合わされた機能が備わっています。もし、Firefoxチームがビルトインされているデベロッパツールの改良の中で素晴らしい仕事をし続けたとしたら、Firebugはいつか、すたれるかもしれません。 個人的な好みにかかわらず、ターゲットとするあらゆるブラウザで、全てのコードのテストやデバッグができるようにすべきです。”あらゆるブラウザ”には、かの有名なInternet E
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[翻訳]Chrome デベロッパーコンソール 意外と知られていない10の機能 - Qiita![[翻訳]Chrome デベロッパーコンソール 意外と知られていない10の機能 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/03695522d511cd7f1c68215ea7f334baf2619e3a/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU3JUJGJUJCJUU4JUE4JUIzJTVEQ2hyb21lJTIwJUUzJTgzJTg3JUUzJTgzJTk5JUUzJTgzJUFEJUUzJTgzJTgzJUUzJTgzJTkxJUUzJTgzJUJDJUUzJTgyJUIzJUUzJTgzJUIzJUUzJTgyJUJEJUUzJTgzJUJDJUUzJTgzJUFCJUUzJTgwJTgwJUU2JTg0JThGJUU1JUE0JTk2JUUzJTgxJUE4JUU3JTlGJUE1JUUzJTgyJTg5JUUzJTgyJThDJUUzJTgxJUE2JUUzJTgxJTg0JUUzJTgxJUFBJUUzJTgxJTg0MTAlRTMlODElQUUlRTYlQTklOUYlRTglODMlQkQmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPThlODkxY2JmZjlmZGIyYmVjNDhiM2Y1ODk5MmQ0YzAw%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBhb3NobzIzNSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MzBlNzQ3MGYyZDljNTQzNGE1MmQ2YzU5ODAxZWE4M2E%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44O044Kh44Or56CU56m25omA%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%3D59122f039190f334f4738dce37b029e3)
C/C++プログラマのための開発ツール