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)とした後に、関
ChromeのデベロッパーツールでJSをデバッグする方法(2022年版) - ICS MEDIA
JavaScriptのデバッグは、ウェブ開発の必須スキルのひとつです。プログラムの実行をデバッグすることで、現在の変数の値や、処理がどのように進んでいるのかを確認できます。デバッグによってプログラムが意図した動作になっているかの分析に役立てられます。 本記事ではGoogle Chromeブラウザーの「Chrome Developer Tools」（以下「デベロッパーツール」、「DevToolsデブ・ツールズ」という略称もあります）を使用してJavaScriptをデバッグする際の基本的な使い方を解説します。「今までデベロッパーツールを使ったことのない」という方でもこの記事を読めば理解できるよう、チュートリアル形式になっています。20分ほどで理解できるようまとめているので、順番に試しながら読み進めてください。 この記事で学べること デベロッパーツールの使い方 JavaScriptのブレークポイ
知っておくとかなり便利！Chromeのデベロッパーツールであまり知られていない実用的な機能とテクニックのまとめ
Chromeのデベロッパーツールは、Web制作に欠かせないといっても過言ではありません。DOMインスペクター、スタイルパネル、JavaScriptコンソールなど基本的な機能だけでも便利ですが、さらに便利になる機能も数多くあります。 デベロッパーツールを使って、Webページやアプリの制作・デバッグのワークフローが大きく改善される実用的で便利な機能とテクニックを紹介します。 Mastering Chrome Developer Tools: Next Level Front-End Development Techniques 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ダークテーマ 02. 要素をすばやく選択できる選択モード 03. グローバル変数として格納 04. アニメーション用のツール 05. 要素の疑似状態をシ
Web制作者は使わないと損！Chrome 59でアップデートされたデベロッパーツールの便利な新機能
5日にリリースされたChrome 59で、ブラウザと共にアップデートされたデベロッパーツールの新機能を紹介します。 What's New In DevTools (Chrome 59) Chrome 59 - What's New in DevTools -YouTube ページの軽量化: 未使用のCSSとJavaScriptを見つける フルサイズのスクリーンショットをキャプチャ リソースのロードをブロック 非同期コードの検証 コマンドメニューの統一 ページの軽量化: 未使用のCSSとJavaScriptを見つける 新機能の一つ目は「Coverage tab」。ページで使用されていないCSSとJavaScriptを見つけることができます。 command + shift + P で、「Show Coverage」を入力して選択。 ※「cov」まで入力すれば、上位に表示されます。 Show
Chrome で今見ている Web サイトでどのような技術が使われているのかを調べる拡張機能 BuiltWith Technology Profiler
Web 開発者の方であれば今開いている Web ページにどのような技術が利用されているのか気になる事がありますよね。ソースを表示したり Developer Tools を起動したりして調べるのも良いですがさくっと確認するだけであれば BuiltWith Technology Profiler という拡張機能を利用するのが便利です。 この拡張機能を入れるとメニューバー上にアイコンが表示されるので、調べたい Web ページを開いてアイコンをクリックするだけです。 例えばこのブログだと上記のような感じに表示されます。 かなーり縦に長いので文字で書きますが以下のような情報を取得しています。 Web サーバの種類, バージョン ネームサーバ ホスティングしているサーバ CMS の種類, バージョン 使用しているフレームワーク 広告の種類 ユーザ統計情報(Google Analytics 等) Jav
任意のサイトで任意のJavaScriptを自動実行させるChrome拡張 - Qiita
任意のサイトで任意のJavaScriptを自動実行させる拡張機能の紹介です。 nakajmg/ScriptAutoRunner 使い道 スニペットを実行させておきたいときに jQueryなどのライブラリを挿入しておきたいときに デバッグに devtools-snippets/にあるconsoleを拡張するスニペットなど、スニペットをあらかじめ実行しておく必要があるものなどに使えます。 ブックマークレットなどで挿入していたjQueryなども自動で挿入することができます。 ホスト名でフィルタリングできるので、デバッグにも使えると思います。 使い方 まず実行させたいスクリプトを追加します。スクリプトの追加は拡張のオプションページから行います。 オプションページは次の3つの方法で開くことができます。 拡張機能のアイコンを押して歯車アイコンをクリック 拡張機能のアイコンを右クリックして"オプション"
Adobe製のJavaScriptデバッガTheseusがすごい - Qiita
この前、研究室の先生に教えてもらったAdobe製のJavaScriptデバッガTheseusがかなり便利なのでご紹介します。 Theseusとは Theseusは、AdobeとMITの共同研究から生まれたJavaScriptのデバッガです（→学会論文）。ChromeとNode.jsの上で動きます。具体的に何をしてくれるのかをざっくり言うと、関数のコールを追跡して、BracketsというAdobe製のエディタに下画像のような感じで表示してくれます。 Theseusのすごいところは、コールバックの実行まで追跡してくれることです。もちろん、エラーが起きた箇所もすぐに見ることができます。また、デバッグをするとき、気になる箇所にconsole.logを挟むことがあると思いますが、Theseusを使えばその必要もありません。関数の横に表示されているコール回数をクリックすれば、その関数の実行ログを表示し
本当にあったTouchEventの怖い話 - Qiita
事前知識: ブラウザ毎の差異 Android 2.x, 3.x 2.x, 3.x では伝統的に TouchEvent がまともに使えません。 経験上、一部端末でdocument.createEvent('TouchEvent')するとNOT_SUPPORTED_ERRを吐くなどの現象が見られ、seleniumのこのコードでも、MouseEventsを利用して無理矢理回避しています。 4.x (Stock Browser & WebView) 4.x では、やっと TouchEvent が利用できるようになります。 が、 イベントの初期化方法が後述する iOS のソレと異なっています。同じくselenium上のコードではこのように回避しているのが見受けられます。 // Android's initTouchEvent method is not compliant with the W3C
Chrome 上で、Canvas API のダンプ、Draw call の可視化、スナップショットが取れる Canvas Profiles が超便利なのでご紹介 - latest log
Chrome には Canvas API の発行状況を可視化してくれる Canvas Profiles が搭載されています（1年ぐらい前からありました)。 これは特定の業種の人(特にCreate.jsとかPexJSを使ってる方々)にとっては神の如きツールであり、知らないと勿体ないのでシェアしますね。 ユースケース (つ◇⊂) 「Canvas のページが重いよ〜 ドラえもん〜」 (ε・◇・)っ はい、Canvas プロファイラー (つ◇⊂) 「描画が崩れる原因がわかんないよ〜 ドラえもん〜」 (ε・◇・)っ はい、Canvas プロファイラー です。 おまけ 機能自体は去年の7月ぐらいから利用可能で、その間にUIが何度かマイナーチェンジしていますね。 あと、プロファイルデータを右クリックすると Load 機能はあるけど Save 機能がないので、 Google Dev Summit 2013
覚えておきたい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は特に使いや
Chrome Developer Toolsを使いこなそう！
1. Chrome Developer Tools を 使いこなそう！ 2013/04/02 Google Developers Live Japan #3 このスライドを使ったセッションはこちら → http://bit.ly/YYtStr Toru Yoshikawa (@yoshikawa_̲t) 2. Who? 吉川 徹 / Toru Yoshikawa @yoshikawa_̲t Google Developer Experts (Chrome) html5j/HTML5とか勉強会スタッフ Web先端味⾒見見部 顧問 ⽇日本jQuery Mobileユーザー会 管理理⼈人 Sublime Text 2 Japan Users Group 管理理⼈人 allWebクリエイター塾/jQuery Mobile担当講師 Blog:
CSSファイルやJavaScriptファイルを閲覧した際に自動整形して表示するChromeエクステンション・PrettyPrint - かちびと.net
ブラウザでCSSやJavaScriptのファイルを見たときにソースを自動整形して表示するChromeエクステンション・PrettyPrintのご紹介。地味に便利・・かも。 ブラウザでCSSやJSファイルを見たときにソースをインデントするエクステンションです。便利っちゃ便利かも。
『JavaScript開発時に便利なツールたち』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。アメーバ事業本部でディベロッパーをしています、平木(id:Layzie)です。 先日2/9に行なわれたFrontrend Vol.4で"JavaScript Development Tools – JavaScript開発の効率アップ"というテーマで登壇させていただいたのですが、セッションでは時間の都合でお話できなかった補足や、その他のツールのご紹介をしていきたいと思います。公式サイトで各講演のスライドと動画を見ることができますので、残念ながらイベントにいらっしゃらなかった方は、ぜひご覽になってください。 Chrome Canaryビル
jQuery 1.9 のソースマップ対応で圧縮版でもデバッグが簡単になった話
jQuery 1.9 がリリースされました。1.9 の新機能の中ではあまり注目されていませんが、ソースマップに対応したのが地味に便利そうです。 というのも、圧縮版の jquery.min.js を使っていると 何か問題が起きたときにスタックトレースを眺めても jQuery の部分が意味不明 デバッガーで jQuery のソースにステップインしても意味不明 といった理由で、開発中には非圧縮の jquery.js を使うことが多かったわけです。 それが、1.9 からはソースマップに対応したので圧縮版のままでのデバッグが簡単になってます。 超簡単な使い方 ソースマップに対応したブラウザーは現時点では Google Chrome のみなので、Google Chrome の手順を説明します。 (Firefox はソースマップへの対応を計画中らしい) 事前準備を忘れずに Google Chrome で
ブレイクポイントの編集を使ったちょっと変わったデバッグテク - Qiita
Chromeの開発者ツールやFirebugのブレイクポイントには、多くのデバッガと同じく特定の条件でだけブレイクする設定をするために編集するという機能があります。 ここには式ならなんでも書けるのでいろんなことができます。 この記事ではChromeの開発者ツールを例に挙げていきます。 ブレイクポイントを編集する ブレイクポイントの編集は、追加済みブレイクポイントのコンテキストメニューから行うことができます。 選択すると、ブレイク条件を設定するための入力欄が表示されます。ここに入力した式の結果がtrueと評価できる値になる場合だけブレイクするようになります。 通常はここにブレイクするための条件を書きます。以下の図の入力だと常にブレイクします。 編集を使ったテクニック さて、ここには好きな式を書くことができるので、ブレイク条件を設定する以外にもいろんなことができます。 好きな位置でconsole
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[翻訳]Chrome デベロッパーコンソール 意外と知られていない10の機能 - Qiita![[翻訳]Chrome デベロッパーコンソール 意外と知られていない10の機能 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/d66c1a02fb93900a9716449f341729577217e372/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkY3OTM5NCUyRjJlNzBkMTE3YTQ4MjBmM2FjOGEwNmZhZmQ5YmVjYjI1NWMwZjU3NmIlMkZsYXJnZS5wbmclM0YxNTcxNTc0ODM4P2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPTdlYThiZmI4ZGM0MDhjMmEyYWMwMmU4ZWUzZjVmMjE2%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D7004c0d648296aaa6c311c99747ccf9a%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCJUU3JUJGJUJCJUU4JUE4JUIzJTVEQ2hyb21lJTIwJUUzJTgzJTg3JUUzJTgzJTk5JUUzJTgzJUFEJUUzJTgzJTgzJUUzJTgzJTkxJUUzJTgzJUJDJUUzJTgyJUIzJUUzJTgzJUIzJUUzJTgyJUJEJUUzJTgzJUJDJUUzJTgzJUFCJUUzJTgwJTgwJUU2JTg0JThGJUU1JUE0JTk2JUUzJTgxJUE4JUU3JTlGJUE1JUUzJTgyJTg5JUUzJTgyJThDJUUzJTgxJUE2JUUzJTgxJTg0JUUzJTgxJUFBJUUzJTgxJTg0MTAlRTMlODElQUUlRTYlQTklOUYlRTglODMlQkQmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz1hMGJiNDZhYjE3NjUyMDRiMGVjMzc0ZmE2NDk1MjZlMw%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBhb3NobzIzNSZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPTZmYjA1ZDdjODFmM2E5YjBjYjY3M2M1ODMyODdjNWQ5%26blend-x%3D242%26blend-y%3D454%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44O044Kh44Or56CU56m25omA%26txt-x%3D242%26txt-y%3D539%26txt-width%3D838%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D28%26s%3D21ce0c6477b75e478147573d9beabc27)
JSのパフォーマンスをお手軽に解析する方法 - Qiita
Situs Judi Online dan Slot Online Bocoran Rtp Terpercaya Indonesia - devtoolstips.com
GitHub - uupaa/ChromeTrigger.js: Web Intent implementation. We will say Goodbye Android Browser!
GitHub - anvaka/jsruntime: Chrome Extension to explore javascript runtime.
