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

プログラミング

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

cssの構文チェックツール

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

W3C CSS 検証サービス

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

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

こんなのものありますね。▽ボタンでオプションを設定できます。

CSS Lint
スポンサーリンク

電子書籍のおすすめ比較

(追加)cssのプロパティの順番を並べ換えるツール

プロパティも綺麗に並べ替えたい人もいるかもしれませんね。オンラインツールだと下記が使いやすいかもしれません。

Csscomb.com Is For Sale
The domain name Csscomb.com is for sale. Call BuyDomains at 844-896-7299 to get a price quote and get your business online today!

適当にcssを左側に記述してcomb itを押しましょう。

順番に関する基本的な解説はこちらがわかりやすく

【CSS】CSSプロパティの記述順について考えてみた | unitopi - ユニトピ -
こんにちは! 新米ライターのケインでございます。 前回の記事で予告した通り、今回は「CSSのプロパティ記述順」についてお話致します。 CSSプロパティ記述順の公式ルールは存在する? CSSプロパティの記述順については、厳密に定義されたルールは存在しません。 ですが、推奨記述順に関するガイドラインというのは、FireFo...

実際にプロパティの順番をリスト化したものは、qiitaあたりがわかりやすいかも。FireFoxのMozilaさんがリンク切れしていたので。

CSSプロパティ記述順序 - Qiita
abc順やcss combなどプロパティの記述順序は様々だとおもいますが、自分はこれでやってます。 ~~ ```content.css /*...

「視覚整形モデル」はdisplayなどの表示とpositonなどの配置を分けていたところもありましたね。どこのサイトも大差はありません。

スポンサーリンク

phpの構文チェックツール

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

PHP Code Checker - Syntax Check for Common PHP Mistakes
An advanced, custom PHP code checker that searches your code for common, hard to find typos and mistakes; includes a syntax check.

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

エラー:PHP Syntax Check: Parse error: syntax error, unexpected ‘;’

ちなみに、こんな感じのエラーがでていたとき

PHP Syntax Check: Parse error: syntax error, unexpected ‘;’

括弧の対応ではなく全角スペースが混じっていたなんていうオチもありますね。

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

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

Attention Required! | Cloudflare

こちらで動作確認が取れていればコードの問題ではなく、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のチェックボックスが入っているか確認しましょう。

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

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

【比較】安いオンラインプログラミングスクール/おすすめの無料プログラム教室は?
エンジニア・プログラマーになりたい人のために、オンライン版のプログラミングスクール比較していきます。初心者大人向けにおすすめで安いプログラム教室も紹介しますよ。 個人的にはブログを運営しているためwordpressのphpやcssもカ...

プログラミングの質問掲示板も便利ですよ。

【有料9選】プログラミング質問掲示板/質問し放題【無料15選】
有料無料とわず、プログラミング有料質問掲示板/質問し放題のメンターマッチングサービスを調べました。国内海外とわず、覚書としてまとめておきます。 【有料】プログラミング質問掲示板/質問し放題スキルシェアサービス MENTA(プログ...

たくさんありますね。

人気記事  【比較表あり】安いオンラインプログラミングスクールはおすすめ?【無料あり】
  1. プログラミングスクールは格安に!cssやphpも楽勝に!
  2. 電子書籍並みの価格で買える格安のプログラム動画学習サイトも一緒に紹介!初心者から上級者向け英語コンテンツまであり。ソースコードは言語関係なしに世界共通!
スポンサーリンク
プログラミング
neruをフォローする
スポンサーリンク
ebookbrain

コメント

タイトルとURLをコピーしました