Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
8
Help us understand the problem. What is going on with this article?
@Shinji-Hashimoto

chromeデベロッパーツールのCall Stackの表示が便利になった!

More than 3 years have passed since last update.

はじめに

chromeはブラウザとしての機能だけでなく、デベロッパーツールにも積極的に機能追加をしています。
先日ver.60に更新され、今回もデベロッパーツールに新たな機能が追加されております。
その中で個人的に一番うれしかった機能をご紹介します。

chrome ver.59までの場合

下図のソースはファンクションCCCBBBAAAの順に呼ぶだけのプログラムですが
CCCからBBBBBBからAAAを呼ぶときにはsetTimeoutを使用して、タイムアウト後に呼び出すようになっております。
アプリケーションを開発していく中ではレンダリングを優先させるためやタイミング調整のためこのようにsetTimeoutを使用する場合があると思います。

ここで、ファンクションAAAをデバッグしたい場合、AAA内部でブレイクさせると下図の通りCall StackはsetTimeout
タイムアウト後の処理から始まり、それ以前までたどることができません。
複雑な処理の場合は非常に不便でした。

2017/8/1 訂正
ver.59でもAsyncチェックボックスをonにする事でver.60と同様の事ができるとご指摘を頂きました。
ver.60からはAsyncチェックボックスがなくなり
標準機能になったようです。

image.png

chrome ver.60の場合

ver 60からはsetTimeoutの呼出し元まで遡ってCall Stackに表示されるようになりました!

image.png

さいごに

chromeのデバッグについては以下の記事にも便利な技を掲載しております。

chromeでのブレイクポイントのいろいろな設定方法
chromeでのデバッグ便利技

8
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Shinji-Hashimoto
2年ほどフロントエンド開発に特化しています。
basic
道具にこだわるアーキテクト集団でありたい。 オープンソースをベースにエッジ・テクノロジーを研鑽し お客様に価値を提供するIT企業です。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
8
Help us understand the problem. What is going on with this article?