[B! devtools] sh19910711のブックマーク

sh19910711 id:sh19910711

devtoolsに関するsh19910711のブックマーク (21)

DevTools の Web 技術でできている部分を覗き見る - polamjaggy
この記事ははてなエンジニア Advent Calendar 2021 の22日目の記事です。昨日の記事は id:shimobayashi さんのアジャイル推進活動にここ1年で吉兆がみえてきた要因について - 下林明正のブログでした。 Chrome の DevTools の UI部分は Web 技術でできています。Web 技術でできているので、DevTools を DevTools で inspect することもできます。 example.com を inspect している画面を inspect している様子このことを知ったのは、10MB くらいある JavaScript ファイルにブレークポイントを貼りつつデバッグしていたら DevTools が固まるようになってしまい、ブレークポイントを解除しようにもその前に DevTools がフリーズしてしまうので詰んだ……、という出
sh19910711 2021/12/24
"DevTools の設定や Console の入力履歴 (JavaScript の REPL のアレ)、ブレークポイントの設定などは DevTools の localStorage に永続化 / DevTools を DevTools で inspect / localStorage を適当に書き換えることでそのあたりを自由に改変できます"

*program

javascript

devtools
リンク
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)とした後に、関
sh19910711 2021/05/03
*program

javascript

debug

devtools
リンク
知っていると少し幸せになれる、Chrome検証機能の小技まとめ - Qiita
みなさんブラウザは何を使っていますか。僕はchromeです。今回はchromeの検証の便利な機能を紹介したいと思います。各種ショートカットキーはMacのものです。何か便利小技が増えたら、ここに追記していこうかと思います。 1. 拡大縮小拡大‥﹁command﹂ + ﹁shift﹂ + ﹁+﹂縮小‥﹁command﹂ + ﹁-﹂元の大きさに戻す‥﹁command﹂ + ﹁0﹂通常のブラウザの拡大・縮小と同じ 2. 上下キーで値の変更 Shift+↑ 10の増減 Alt+↑ 0.1の増減 3. 色をカラーピッカーから選択カラーピッカーから色を選択できます。さらに以前はchromeの拡張機能からしかできなかったような、サイト上から色を選択してとってくることもできます。透明度も変更できる 4. minify化しているファイルを整形 minify化されているようなファイルを整形
sh19910711 2019/10/26
DevToolsから:hover再現できるのか

*webdev

*software

browser

devtools
リンク
CVE-2018-7160 と Chrome DevTools Protocol のメモ
機動戦士ガンダムユニコーン RE:0096を視聴したところ、感化されて Aimer を聴きながらユニコーンのガンプラを作って大変満足している。 Node.js の inspector モードで DNS Rebinding を利用した RCE (CVE-2018-7160) がどのようなものなのか手元で確認してみたのでメモ。メモなのでかなり殴り書き。 Chrome DevTools Protocol CVE-2018-7160を理解する前に Chrome DevTools Protocol について知っておく必要があった。 Chrome DevTools Protocol を利用することで Blink ベースのブラウザのデバッグやら何やらが可能になる。 Headless Chrome での操作はすべて Chrome DevTools Protocol で制御され、その実体は WebSock
sh19910711 2019/06/28
*security

devtools
リンク
Chrome 68 DevTools の新機能/変更点 - Qiita
Eager Evaluation コンソールで式を入力した時に、入力を確定させる前に結果がプレビュー表示されます。次は .sort() の ) を入力した直後の状態です。ちょっとした値の確認であれば、式を入力後に Enter キーを入力する手間が不要になります。ただし副作用を起こす場合はこの機能が無効になります。次は配列を宣言し、値を追加しようとしているところです。push() は破壊的な操作になるためプレビューが行われません。また、この機能はデフォルトでは無効となっています。有効にするには Console Settings から Eager evaluation にチェックを入れる必要があります。引数のヒントを表示コンソールで関数のカッコ ( を入力した際にその引数がツールチップで表示される機能です。メジャーな IDE ではよくある機能ですね。関数実行後の自動補完関数実
sh19910711 2018/07/14
*software

*webdev

browser

devtools
リンク
Chrome開発ツールのマスター：次世代フロントエンド開発テクニック - hatekatsの日記
Chromeデベロッパーツールの基本機能︵DOMインスペクタ、スタイルパネル、JavaScriptコンソール︶にはすでに慣れているかもしれません。しかし、あまり知られていない多くの機能があり、デバッグやアプリの作成ワークフローを大幅に改善することができます。暗いテーマ Chromeには、開発ツール用の暗いテーマが組み込まれています。これを有効にするには、開発ツールペインの右上にある3つの点のアイコンをクリックし、﹁設定﹂をクリックしてテーマを切り替えます。私は時にはこれを私の目でより簡単に見つけることができます。そして明らかに、それはもっとクーラーに見えます:) 選択モード Chromeデベロッパーツール︵DevTools︶では、要素を選択するさまざまな方法が用意されています。その中で最も便利なものは選択モードです。このツールは、開発ツールパネル︵またはcmd + shift + c
sh19910711 2017/07/29
devtools, transitionのeasingとか視覚的に触れるようになっている

*webdev

webapp

*software

devtools
リンク
Chrome 60 DevTools の新機能/変更点 - Qiita
Lighthouse による新しい Auditsパネル Lighthouse はサイトの品質を向上させる事を目的とした、Google によるオープンソースの監査ツールです。 Chrome で実行するにはエクステンションとして別途インストールする必要がありましたが、標準で Auditsパネルに組み込まれました。ページに対して次のカテゴリを計測し、スコアを算出します。カテゴリは実施時に変更可能です。 Progressive Web App Performance Accessibility Best Practices 各カテゴリの詳細内容も確認できます。 Chrome59で同じページを計測した結果です。サードパーティバッジ Network と Console パネルにサードパーティバッジが表示されるようになりました。バッジにマウスカーソルをあてるとツールチップで名前が表示されます
sh19910711 2017/07/01
Lighthouse / "Chrome で実行するにはエクステンションとして別途インストールする必要がありましたが、標準で Audits パネルに組み込まれました。"

*webdev

devtools

Lighthouse

*program

javascript
リンク
What's new in DevTools (Chrome 58) | Blog | Chrome for Developers
Welcome to the first installment of the DevTools release notes! From here on out, the first time you open a new version of Chrome, DevTools opens the What's New drawer with a link to the release notes for that version. Highlights The Timeline panel has been renamed to the Performance panel. The Profiles panel has been renamed to the Memory panel. Cookie values are now editable. DevTools now automa
sh19910711 2017/04/20
*webdev

devtools
リンク
Chrome Developer ToolsのTimeline -> Bottom-Up -> Group by URLが便利だった - $shibayu36->blog;
アニメーションが遅い問題を調査していて、どうやって原因を特定すれば良いかわからない状態だった。それをチャットで会話していたら同僚が﹁Chrome Developer ToolsのTimeline -> Bottom-Up -> Group by URL使うと良さそう﹂みたいなことを教えてくれた。使ってみたら非常に便利だったのでメモ。 Developer ToolsのTimelineである期間にどのような処理が動いていたか知ることができる(画像の上半分)ということは知っていた。しかし、下部分のSummaryのタブを切り替えてBottom-Upを押すと、いろんなグループでまとめて調査できるということは知らなかった。その中でGroup by URLを選択すると、読み込みJSごとでかかっている時間がぱっと分かる。この中には自分が入れている拡張も含むので、自分固有の問題なのか、そうではないかも切り
sh19910711 2017/01/06
*webdev

devtools
リンク
GitHub - khanghoang/vision: Mock request on the flight
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
sh19910711 2016/11/26
*webdev

browser

testing

devtools
リンク
console.logまとめ 2016年夏 - Qiita
console.log関連についてまとめました。モダンブラウザであればどれも使用できると思いますが、基本出力結果等はchromeで確認したものです。 console.hogehogeのいろいろ基本引数を入れることで出力結果をカスタマイズできます console.info、console.warn、console.errorそれぞれで見た目を変えることができます。 console.assert 式を評価してfalseの場合にログ出力します。 console.count ログの出力結果が同じ場合にカウント数が自動的に増えていきます。 console.dir オブジェクトのプロパティの中身をログに出力します。 console.dirxml HTMLとかXMLの要素を渡すと、下の要素が全部見れるようになります。 console.group、conosle.groupCollapsed co
sh19910711 2016/08/18
*program

javascript

devtools
リンク
Debugging Node.js with Chrome DevTools
Support for Node.js debuggability landed in Node.js in 2016. Here’s how to get up and running. (Post updated Jan 2018) 1. Download and install the current version of node. (v6.3.0+ required) 2. Run node with the --inspect-brk flag: # Break on the first statement of the script▸ node --inspect-brk index.jsNext, you used to open the big chrome-devtools:// URL it spits out, but don’t. Now there’s a be
sh19910711 2016/08/14
nodeだけでdevtoolsとの連携完結できるようになるのかな

*program

javascript

frontend

devtools

debug
リンク
ブラウザの通信内容を詳しく知りたい場合は Chrome DevTools の Network Tab のヘッダ部分を右クリックしてカラムを増やすとハッピーになれますの図 - latest log
sh19910711 2016/05/06
*software

browser

devtools
リンク
GitHub - Experience-Monks/hihat: :tophat: local Node/Browser development with Chrome DevTools
local Node/Browser development with Chrome DevTools Runs a source file in a Chrome DevTools process. Saving the file will reload the tab. This is useful for locally unit testing browser code with the full range of Web APIs (WebGL, WebAudio, etc). It provides access to profiling, debugger statements, network requests, and so forth. It can also be used to develop typical Node projects, or as a gener
sh19910711 2016/03/21
*program

javascript

frontend

desktop

devtools
リンク
DevTools へのセキュリティパネル導入について
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
sh19910711 2016/02/22
*software

browser

devtools
リンク
DevTools Snippets
allcolors.js # (view raw) Print out all colors from computed styles used in elements on the page. Uses styled console.log calls to visualize each color. // allcolors.js // https://github.com/bgrins/devtools-snippets // Print out CSS colors used in elements on the page. (function () { // Should include colors from elements that have a border color but have a zero width? var includeBorderColorsWit
sh19910711 2015/12/11
*program

javascript

*webdev

devtools
リンク
覚えておきたい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は特に使いや
sh19910711 2015/03/17
*webdev

devtools
リンク
DevTools 上で jQuery などのお気に入りのライブラリを簡単に使いたい方へ - latest log
Chrome の DevTools には Code Snippets という機能があります。これは﹁DevTools 上でお気に入りのライブラリを登録しておいて簡単に呼び出して使いたい﹂と言った、ありがちなニーズにぴったりフィットする機能です。 ChromeのDevToolsでjQueryをいつでも使いたいなら、Source-Snippetsで右クリックして[New]選んでjQueryをペタリしておくと[Run]するだけでjQueryをDevToolsで利用可能になりますよ〜 http://t.co/SfLE4Sic39— コラーゲンたっぷりさん (@uupaa) 2014, 5月 15 http://t.co/Ee2keo5n7u これ色んな事につかえて、DevTools の IDE としての機能も、アイデアしだいで拡張できるので、もちょっと広く認知されるといいんだけども〜 (ミ・◇・
sh19910711 2014/05/16
*webdev

browser

devtools
リンク
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能
Webアプリのデバッグやチューニングに役立つ、Chrome Developer Toolsの主要機能を、スクリーンキャプチャ中心で簡潔に紹介。2014年10月に最新情報に改訂。モダンブラウザーの中でGoogle Chromeは最後発ながら、その機能の潤沢さ、便利さ、高速さからシェアを大きく伸ばしている。そして、今やほとんどのブラウザーではWindowsの場合F12キーを押すことで︵Macの場合はCommand＋Option＋Iキーで︶手軽に各ブラウザー搭載のデベロッパーツールを利用できるが、特にChromeのデベロッパーツールは、非常に機能が豊富なため、利用している人もかなり多い。本稿では筆者がよく使う機能や、使うと便利な機能を中心に、Chromeのデベロッパーツールについて紹介していく。なお、本書は執筆時点で、最新のChrome38を使用している。機能ふかん残念ながら、Chro
sh19910711 2013/12/27
*webdev

Google

browser

devtools
リンク
https://developers.google.com/web/tools/setup/workspace/setup-devtools
Chrome でビルドする Chrome の仕組み、オリジントライアルに参加して、あらゆる場所で Chrome を使って構築しましょう。
sh19910711 2013/10/27
*program

javascript
リンク
1 2 次のページ