2019年のWebGLデバッグツール状況 - Qiita
これはThree.js Advent Calendar 2019の14日目の記事です。 3年前に以下の記事を読んでWebGL Inspectorを使い、デバッグ処理でWebGL Inspectorに凄くお世話になりました。 WebGLの開発やデバッグに便利なブラウザ拡張機能をつかってみよう 「Three.jsにBaylon.jsみたいなDebug modeある？」という議論を見つけて気になったので、現状のWebGLデバッグツール状況を調べてみました。 Three.jsフォーラム - Does three.js has some “scene debug mode” or plugin? (like babylon.js DebugLayer) 消失したデバッグツール WebGL Inspector 最終更新日（github）：2017/02/22 去年はまだChromeウェブストアにあった
What's New In DevTools (Chrome 77) | Blog | Chrome for Developers
Copy element's styles Right-click a node in the DOM Tree to copy that DOM node's CSS to your clipboard. Figure 1. Copy element styles. Thanks Adam Argyle and VisBug for the inspiration. Visualize layout shifts Supposing you're reading a news article on your favorite website. As you're reading the page, you keep losing your place because the content is jumping around. This problem is called layout
Chrome に PWA for Desktop が来ていたので next-editor で試した - mizchi's blog
追記: Canary じゃなくてもいいらしいのでタイトル修正した。が…実装具合はよくわからない 今年中に来るとは聞いていたやつ。要はウェブアプリを デスクトップアプリ化する。Electron と違って Chrome の Sandbox と同じ権限で動いている Twitter Lite をデスクトップ PWA にして使ってるんだけど、最 & 高です。 Mac だと Chrome Canary で enable-desktop-pwas のフラグを立てると使えます。 pic.twitter.com/0TPhe8gyQL— Eiji Kitamura / えーじ (@agektmr) 2018年7月12日 ちなみに Chrome Canary + フラグは上級者向けなので、自身のない方はいましばらくお待ち下さい。そのうち安定版で普通に使えるようになります。— Eiji Kitamura / えー
JavaScript書くのに入れとくといいもの
Chrome CanaryDevToolsも進化してるのでStableではなくCanaryを Local ProxyPCのみならDevToolsだけでもいいけど、スマホのWebView内解析とか考えるとLocal Proxyは必須 Windowsなら Fiddler （無料） Macなら Charles （有料） Macでお金払うのが嫌な場合 CocProxy for nginx （無料。CUI。Ruby版使うくらいならこちらを） JS製が良くてソース読みたいなら Klepto （無料。GUI。不安定） ソースの文字コード変更ChromeでJS、CSS開くと日本語が化けるので、初期文字コードをUTF-8に変更 （フォント設定（ chrome://settings/fonts ）の一番下を「Unicode (UTF-8)」に） “This Frame” Context Menuiframeの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デベロッパーツールの新機能が便利！CSS Gridの実装と検証が簡単になるCSS Grid editorとオーバーレイ
デベロッパーツールがさらに便利に！Flexboxの実装と検証が簡単になるFlexboxエディタとオーバーレイが搭載
Omni banner slider - ZED
