タグ付けされた質問 「web-inspector」

11
印刷プレビューモードでChromeのElement Inspectorを使用していますか?
私はウェブサイトの開発に取り組んでおり、印刷ビューで作業する必要があります。通常、レイアウトに問題がある場合は、ChromeのElement Inspectorを使用します。ただし、これは印刷プレビューモードでは存在しません。 プリンターのようにページを表示するために、ChromeプラグインまたはChrome内の表示メディアを変更する他の方法はありますか?Chrome固有のソリューションはないと思いますが、それが私の主要なブラウザーであるため、ブラウザー内のソリューションがあればよいでしょう。 現在、私は印刷プレビューメディアだけに焦点を当てていますが、サポートされているメディアタイプ(つまり、すべて/点字/エンボス/ハンドヘルド/印刷/投影/画面/音声/ tty /)に変更できることが理想的です。テレビ)。

4
Chrome開発ツール-「サイズ」と「コンテンツ」
Chromeの開発ツールの[ネットワーク]タブでスタイルシートに関する情報を表示すると、1つの列で「サイズ」と「コンテンツ」の両方が指定されます。 誰かがこれらの2つの数値の違いを明らかにすることはできますか?一部のページでは数値が近い場合と、かなり異なる場合があります。

12
印刷スタイルシートをデバッグするための提案?
私は最近Webサイトの印刷スタイルシートに取り組んでいて、効果的な方法で調整することに途方に暮れていることに気付きました。画面レイアウトで作業するためのリロードサイクルがあることの1つは次のとおりです。 コードを変更する コマンドタブ リロード しかし、印刷しようとすると、プロセス全体がはるかに困難になります。 コードを変更する コマンドタブ リロード 印刷する 印刷プレビュー画像で目を細める プレビューでPDFを開いてさらに検査する ここで見逃しているツールはありますか?WebKitのインスペクターには「これはページングされたメディアである」というチェックボックスがありますか?Firebug(震え)ができる魔法はありますか?

3
SystemJSのようなモジュールローダーを使用する場合のSafariのWebインスペクターでのデバッグ
私が作成していますIonic使用してアプリをes6 modules、TypeScriptおよびSystemJSモジュールローダとして。これは私のセットアップです: tsconfig.json: { "compilerOptions": { ... "target": "es5", "module": "system", ... } } index.html: <script src="lib/system.js"></script> <script src="systemjs.config.js"></script> <script>System.import('js/app.js')</script> スクリプトの例(TypeScript): import {IConfig} from "./app-config"; export class ConfigLoader { ... } Chromeですべてがうまくいきます。ただし、SafariのWebインスペクターを使用してデバッグする場合、WebインスペクターはHTMLから直接読み込まれたスクリプト(スクリプトタグを介して)のみを表示し、XHR(私の場合はSystemJS)によって読み込まれたスクリプトを表示しないため、スクリプトにブレークポイントを配置できません。 。つまり、自分のスクリプトをデバッグすることはできません。もちろん、これは受け入れられません。 以前のようにSystemJSを使用してこれを回避しようとしましたが、次のようにスクリプトタグをhtmlに配置しました。 <script src="lib/system.js"></script> <script src="systemjs.config.js"></script> <script src="js/app-config.js"></script> ... other app scripts <script>System.import('js/app.js')</script> ただし、SystemJSはこれについて満足していないようなので、これは機能しません。 無効なSystem.register呼び出し。匿名のSystem.register呼び出しは、SystemJS.importによって読み込まれたモジュールでのみ実行でき、スクリプトタグ経由では実行できません。 SystemJSをどのように使用し、同時にSafariでデバッグすることができますか?「各スクリプトにデバッガーステートメントを置く」よりも少し洗練された解決策を探しています...

14
インスペクターからのCSS変更のエクスポート(webkit、firebugなど)
CSSを使用しているときは、ブラウザー(Chromeなど)で要素を右クリックし、[要素の検査]をクリックして、CSSを編集することがよくあります。矢印キーを使用してマージンやパディングなどを変更すると、非常に簡単に整列できます。 これらの変更を適用してCSSファイルに適用することはそれほど難しくありませんが、インスペクターでセレクターを右クリックして[エクスポート]または[コピー]を選択し、コンテンツを使用できるようにすると便利ですクリップボード。 このようなものは存在しますか?

6
Chrome Webインスペクターを使用してホバーコードを表示する方法
chromes Webインスペクタを使用してコードを表示すると非常に便利です。しかし、たとえばボタンのホバーコードをどのように表示しますか?ボタンの上にマウスを移動する必要があるため、インスペクターでボタン(マウス)を使用できません。インスペクターでこれを達成するためのショートカットまたは他の方法はありますか?

4
Safari Webインスペクターがソース、コンソール、監査のみを表示している
Xcode 11.3.1にアップグレードした後、iOS 12.1シミュレータでSafari Webインスペクタを使用すると問題が発生します。iOS 12.1シミュレーターデバイス内でアプリを実行するたびに、アプリはSafariデバッグメニューに表示され、接続できるようになりますが、表示されるタブは[ソース]、[コンソール]、[監査]のみです。 これは、シミュレータ内のSafariブラウザのインス​​タンスに接続されたインスペクタのスクリーンショットです。 これを解決する方法はありますか? 環境: MacOS 10.14.6(18G95) Xcode 11.3.1 Safari 13.1(14609.1.20.111.8) Simulatorバージョン11.3.1(SimulatorApp-912.5.1 SimulatorKit-570.3 CoreSimulator-681.17.2)
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.