Chrome DevTools Console で使える便利なコマンド
はじめに この記事は #EveOneZenn (Everyday One Zenn) vol.03 です。 今回は Chrome DevTools の Console で使用できるコマンド（ Utilities API ）についてまとめます。 なお、紹介するコマンドはすべて、 Console パネルから実行した場合のみ使用できます。 前回： 参照系 $_ $_ は Console パネル上で直近に実行された処理の結果を参照します。 これを活用すると、Promise を返した関数を await させることができます。 $0 - $4 $0 は Elements パネル上でアクティブな要素を参照します。 Elements パネル上で == $0 と表示されている要素が $0 で参照できる要素です。 また、$1・$2・$3・$4 で直近で選択していた要素を参照できます。 $(selector,
優秀なデバッガー（node-inspector）を使いたい人はnode.js v6を使い続けたほうが良いかも - Qiita
$ $ node-inspector module.js:491 throw err; ^ Error: Cannot find module '_debugger' at Function.Module._resolveFilename (module.js:489:15) at Function.Module._load (module.js:439:25) at Module.require (module.js:517:17) at require (internal/module.js:11:18) at Object.<anonymous> (/Users/userName/.nodebrew/node/v8.4.0/lib/node_modules/node-inspector/lib/debugger.js:2:16) at Module._compile (module.
What's New In DevTools (Chrome 62) | Blog | Chrome for Developers
New features and changes coming to DevTools in Chrome 62: Support for top-level await operators in the Console. Screenshots of a portion of the viewport, and screenshots of specific HTML nodes. CSS Grid highlighting. A new Console API for querying objects. Negative filters and URL filters in the Console. HAR imports in the Network panel. Previewable cache resources. More predictable cache debuggin
WebWorkerのデバッグで覚えておかないと面倒なこと - Qiita
はじめに HTML5から並列処理を行えるようになりました。 まだ使い始めなのですが、ハマって面倒だったことが合ったので、 備忘も兼ねて書いておきます。 自分で書けば・・・ 恥を晒して・・・ 何が面倒か 「デバッグ」。気づくまではconsole.logとかでやんないといけないの？ とアホなことを考えてみました。でもGoogle Expert SeriesのHTML5の本にも 載っていないし、痒いところに手が届いていない感じでした。 方法は簡単、というか気づけば何の問題もありません。 WebWorkerの並列処理をデバッグする ちょっと見づらいですが、開発者ツールからいけます。 Sourceタブを開いて、下記の画像の赤い枠を見て下さい。 １，Pause on start にチェックを入れておくと、WebWorkerの初期化時に WebWorker用の開発者ツールがもう一つ出てきます。 ２
Chrome DevToolsでjavascriptをデバッグする際に忘れてはいけない大切な事 - Qiita
Chrome DevToolsはとてもとても便利で、毎日お世話になっている神ツールです。 単純なHTMLの解析からGPUの使用具合というマニアックな情報まで色々確認出来ますが、その中でデバッグの時に設定しておく事で、ちょっとしたミスを減らして問題にすぐ気付ける設定が１つあります。 javascriptエラーが発生した場合にエラーを補足しBreakする Sourceタブを選択した場合に、左下にメニューがあります。 その中の機能としてボタンっぽいがあります。 これを、1回クリックします。するとという感じで色が変わります。次にもう一度クリックします。するとこんな感じで色がまた変わります。 これらを設定しておくと、javascript実行時に発生したエラーをDevToolが検知してBreakしてくれるので、すぐに問題のあるコードに気がつく事が出来、ミスにすぐ気がつく事が出来ます。 Pause on
Adobe製のJavaScriptデバッガTheseusがすごい - Qiita
この前、研究室の先生に教えてもらったAdobe製のJavaScriptデバッガTheseusがかなり便利なのでご紹介します。 Theseusとは Theseusは、AdobeとMITの共同研究から生まれたJavaScriptのデバッガです（→学会論文）。ChromeとNode.jsの上で動きます。具体的に何をしてくれるのかをざっくり言うと、関数のコールを追跡して、BracketsというAdobe製のエディタに下画像のような感じで表示してくれます。 Theseusのすごいところは、コールバックの実行まで追跡してくれることです。もちろん、エラーが起きた箇所もすぐに見ることができます。また、デバッグをするとき、気になる箇所にconsole.logを挟むことがあると思いますが、Theseusを使えばその必要もありません。関数の横に表示されているコール回数をクリックすれば、その関数の実行ログを表示し
CSSアニメーションを作るときはChromeデベロッパーツールのAnimationsが便利 - Qiita
CSSアニメーションは直感的じゃないから作りづらい CSSでアニメーションを作るとき@keyframesを使います。オブジェクトを拡大縮小するアニメーションなどは次のようなスタイルで指定します。 @keyframes scale-anime { 0% { transform: scale(1); } 33% { transform: scale(2); } 66% { transform: scale(0.75); } 100% { transform: scale(1); } } .el { animation: scale-anime 1s linear; } Web開発者にはお馴染みのChromeデベロッパーツール。デベロッパーツールの機能の中に「Animations」があり、CSSアニメーションのテンポや尺(時間)を調整できます。 まずは、作成したアニメーションをChromeで表示
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
