Windows

Chrome開発ツールチュートリアル、ヒント、トリック

’, Â, � etc... How to fix strange encoding characters in WP or other SQL database

’, Â, � etc... How to fix strange encoding characters in WP or other SQL database

目次:

Anonim

Chromeデベロッパーツール は、デバッグ中に非常に役立ちます。 Chromeデベロッパーツール

は、高度な機能を備えているため、Web開発の一般的なWebブラウザーの1つです。

Chrome開発ツールのヒント Chrome Devの未知の隠された秘訣はたくさんありますが、多くの人がChrome Dev Toolsを使用して実際のCSSを編集できることを知っています。ツールとその中で最も有用な技を探していきます。 Chromeでデベロッパーツールを開くには、キーボードの F12

を押して、次の方法を試してみてください。

任意のファイルを検索して開く Web開発を行う際には、多くのHTML、CSS、JSなどのファイルを扱います。何かをデバッグしたいときは、Chrome Devツールを開きます。特定のファイルをすばやく検索して見つけることができます。 Ctrl + P

を押して、ファイル名の入力を開始します。これはファイルのリストから特定のファイルを見つけるのに役立ちます。

2。ソースファイル内で検索 以前のトリックでは、特定のファイルを検索する方法を知りました。ロードされたすべてのファイルで特定の文字列を検索することもできます。ファイル内の文字列を検索するには、 Ctrl + Shift + F

を押します。正規表現もサポートしています。

3。特定の行に移動 ソースファイルを開いて特定の行に移動したい場合は、 Ctrl + G

を押して行番号を入力し、Enterキーを押します。

$$() -

与えられたCSSセレクタと一致する要素の配列を返します。 さらにコンソールコマンドを使うには、このポストに向かいます。
  • 5。複数のキャレットを使用する 複数のキャレットを別々の場所に設定したい場合は、
  • Ctrl

    キーを押しながら配置する場所をクリックしてChrome Devツールで簡単に行うことができます。次に書き込みを開始すると、選択されたさまざまな場所に配置されていることがわかります。

    6。ログの保存 ログの保存は、ページがロードされてもログを保持するのに役立ちます。コンソールログで ログを保存

    の横にあるオプションをオンにすると、ログは保存されます。これはページがアンロードされ、バグを調査するのに役立つ前にログを表示します。

    7。組み込みのコード美化器を使用する Chrome Dev Toolsには、 pretty print "{}"と呼ばれる組み込みのコード美化器があります。

    開発者ツールは最小化されたコードを表示します。開いているソースファイルの左下に表示されるきれいな印刷ボタンをクリックして、ソースファイルを人間が読める形式で表示します。

    あなたのウェブサイトはモバイルフレンドリーですか?ここで確認する Chrome Dev Toolsでは、ウェブサイトがモバイルフレンドリーであるかどうかを確認することもできます。さまざまなデバイスでウェブサイトがどのように見えるかを確認できます。 Chrome Devツールに移動し、 Emulation

    タブでさまざまなデバイスを登録できます。あなたが望むデバイスを選択し、そのデバイスであなたのウェブサイトがどのように見えるかをテストします。

    詳細については、以下のビデオをご覧ください。センサーと地理的位置をエミュレートする タッチスクリーンや加速度センサーなどのセンサーをエミュレートすることもできます。地理的な場所をエミュレートすることもできます。これを行うには、 エミュレーション - >センサーに進みます。

    10。現在の単語の次のオカレンスを選択する

    単語を置き換える場合は、その単語を選択して

    Ctrl + D を押して、選択した単語の次のオカレンスを選択します。あなたはその言葉をワンショットで編集できます。

    11。カラーフォーマットを変更する

    カラープレビューで Shift +クリック を使うだけで、rgba、16進、およびhslのフォーマット間の変更を変更できます。ワークスペースを介してローカルファイルに変更を追加する

    Chromeの開発ツールでは、ソースファイルを編集してCSS、Java Scriptなどのファイルを変更することができます。これらの変更をローカルファイルに追加するには、変更をワークスペースからディスク上のファイルにコピーして貼り付ける必要はありません。 Chrome Devツールを使用すると、開発ツールで行った変更をファイルにマッチさせ、ローカルファイルを更新することができます。これを行うには、

    ソース タブの左側にあるソースファイルを右クリックし、 ワークスペースへのフォルダの追加

    を選択します。ワークスペースの詳細については、Chrome.comにお問い合わせください。