CSSやPHPの構文チェックツール/Chromeデベロッパーツールのスマホサイトのデバッグ

シェアする

program003

cssやphpなどの構文チェックツール、Chromeデベロッパーツールのスマホサイトのデバッグについて簡潔にまとめていきます。

cssの構文チェックツール

cssの構文チェックツールはいくつかでていますが、こちらがおすすめかも。CSSが効かないとき利用しましょう。

style.cssなどを丸ごとコピペで直接入力がお手軽ですかね。使い方はコードを入れたのち、「検証する」のボタンを押すだけです。

必要ならオプションもありますので、お好みでどうぞ。

スポンサーリンク

電子書籍のおすすめ比較

phpの構文チェックツール

phpの構文チェックツールはいくつかでていますが、こちらですかね。Wordpressに直接書くとエラーで動かなくなるかもしれませんからね。

An advanced, custom PHP code checker that searches your code for common, hard to find typos and mistakes; includes a syntax check.

ちょっと使うにはいいんじゃないでしょうか。

スポンサーリンク

wordpressに直入力ではなく、codepenも活用する

少し難しいものを作成する場合、codepenを利用しています。ブラウザに依存しないため助かります。使い方はNewPenをクリックしてhtmlとcssを入れれば0Kです。

A front end web development playground.

こちらで動作確認が取れていればコードの問題ではなく、Wordpressのプラグインやテーマやブラウザの問題であることがわかります。

無料で登録なしでも使えます。大変便利なサービスですね。

chrome developer toolsはiosやandroidのスマホサイトのデバッグもできる

Chromeデベロッパーツールはスマホサイトのデバッグもできます。レスポンティブWebサイトをブラウザで幅を縮めるのではなく、iosやandroidのスマホのコードをみたいと思ったことはないでしょうか。

右クリック > 検証 > 左上のスマホのアイコン

これだけでいろいろな端末が選べます。表示サイズ等を変更することもできます。

とはいえ、やはり実機で検証した方が安心という人もいるでしょう。持っているAndroidの実機で調べる場合は、

  1. 設定 > 開発者オプション ON
  2. 同じところにある、USBデバッグ ON
  3. USBケーブルの接続。接続したときにAndoroid側で「このPCのデバッグを許可しますか?」と聞かれる場合があるため許可します。
  4. PCのGoogle Chrome を開き、 chrome://inspect にアクセス(新規タブをひらいてアドレスを入れましょう) Deviceのタブをみます。
  5. すると、AndroidのChromeで開いている、ページが表示されます。ページを開いていない場合はテストしたいページを開きます。
  6. 各ページのinspectを開きます。スマホ側もChromeを開いている必要があります。
  7. スマホのChromeとPCのChromeが連動し、ソースコードの確認ができます。
スポンサーリンク

エラー:Pending authentication: please accept debugging session on the device.

chrome://inspectにスマホサイトが表示されない場合、Pending authentication: please accept debugging session on the device.というエラーがでる場合があります。大抵の場合はAndoroid側にデバッグの許可を求めるメッセージがでていて許可していないだけです。

あと、Discover USB devicesのチェックボックスが入っているか確認しましょう。

プログラミングを動画、質問掲示板、チャットで学習する

プログラミングを動画やチャットで学習する方法はこちらです。動画は書籍より安い場合が多いですよ。

オンラインのプログラミングスクール比較/おすすめで安いのは?エンジニア初心者のプログラムの学習サイト
エンジニア・プログラマーになりたい人のために、プログラミングスクールやサイトをまとめてみました。 個人的にはブログを運営しているため...

プログラミングの質問掲示板、レバレジーズteratail(テラテイル)も便利ですよ。

レバレジーズteratail(テラテイル)の口コミ・評判、利用してみた感想
teratail(テラテイル)は時々利用しているユーザーなのですが、感想としては会員の質がいいですね。 プログラムの質問掲示板...
スポンサーリンク

シェアする

フォローする

スポンサーリンク