フロントエンドのデバックチェックリスト

フロントエンドのデバックチェックリスト:

どうもこんにちは私です。

本日は私がいつも行なっているデバック項目をご紹介しますー。

　

form動かない編

フォームが動かなくなることが割とよくあります。

その時にチェックする項目をご紹介します。

action先があっているか確認する

肝です。formというのは「情報を次のページに送ることのできるリンク」みたいなものなので、はじめに送信先を設定しなければ当然エラーがおきます。

<form method="post" action="[ここがあってるかcheck]"> 

nameがちゃんと全て送信できているか確認する

formというものはnameに紐づけてデータを送信しています。また、actionで設定されている送信先では大抵あらかじめ受け取るnameを設定した上で、一つでもなかった場合エラーを吐くようにしています。

なので、バックエンドの人に受け取る前提のnameリストをもらった上で、「そのネームがちゃんとあるか・スペルミスがないか」をしっかりと確認しましょう

<input type="text" name="[ここをcheck]"> 

formタグに囲われていない

稀に、意図しないところにinputタグを置いてしまっていて、formが正常にnameに付与されたデータを送信できていな場合があります。

formタグにしっかり囲われているか確認しましょう

<form method="post" action="/check.html"> 
　　　<input type="text" name="aaa"> 
 <input type="submit" value="go"> 
</form> 

そもそも送信先のページが存在しない

稀に、自分の作り忘れでこんなことが起こることもあります。しっかり確認しましょう

CSS効かない編

cssがなぜか効かない！そんな時のチェック項目を紹介します

 リンクが切れている

ページ移行をした時などは特に多いです。しっかり確認しましょう。

一番確認しやすい方法は、ブラウザに　html　を入れて、cssが聞いていない状態のwebサイトを開きます。

検証ツールなどでcssのURLを貼っているところまで行き、そのURLを開いてみます。

開けなければ、それはリンクが切れているので、URLを再度見直しましょう

プリプロセッサーのコンパイルの関係でcssが反映されれいない

これもありがちです。私たちではわからないレベルのエラーか何か起きているのでしょうか、たまに、見た目では回っていてもcssが吐き出されていないことがあります。この場合も一旦、吐き出し元のcssを参照し、ちゃんと記述として吐き出されているかを確認しましょう。

htmlとcssの名前のスペルミス

私の中ではこれが圧倒的に多いです。

私はキャメルケース（kimihaKirei）を使うことが多いのですが、うっかり大文字の箇所を小文字にしていたり、名前を変えた関係上冒頭が大文字になってるとかでcssで設定している名前と誤差が生じて効かなくなります。今一度チェックしましょう

html内のclassのスペルが間違っている

プリプロセッサーを使っている人は無縁かもしれませんが、html直書き時代はよくやらかしていました。cssネームにだけとらわれていてなかなかん気づかないんですよね！

cssの優先順位的に負けている

検証ツールでもし自分の設定したcssが打ち消されていればそれは優先順位の関係上負けていることになります。

他のcssに影響がなければそこの記述を変更。ありそうであれば、さらに優先順位をあげるか、あまりいい方法ではないですが！importantを付与して優先順位をあげてあげましょう。