デザイナーのスマホのcssのデバックを手伝った話

デザイナーのcssのデバッグを手伝った備忘録
デザイナーの人がどうしても動かない、どうしてもこれができないって言う時に行うためのTips
(特にスマホ）
※ Javascriptアレルギーの方には不向きです
※ jQueryで書いてあるところがあるので適宜なんとかしてください、不安ならエンジニアに見せればなんとかしてくれます

iOSで動かない！

Macがある場合に使えるデバック

MacとiPhoneをつなげてデバックが出来るのはご存知？
1. MacとiPhoneをつなげる
2. Safariのメニューから開発を選ぶ
（※ 開発がない場合はsafari→環境設定→詳細→メニューバーに"開発"メニューを表示 にチェックを入れる）
3. ユーザーエージェントの下らへんにあなたの端末名（iPhoneとかiPad)とかの名前があるはずなのでそれを選択する
（※ 表示されない場合はiPhoneにこのPCを信頼しますか？と出ているので信頼を押す、出ていない場合は認証みたいなボタンを押す）
4. みたいタブを選択する
5. chromeっぽいデバッガーが出るのであとはなんとかする

Androidで動かない！ and Macがない！

(なんかいいデバッガーあったら教えてください）

javascriptのalertでデバッグ

<script type="text/javascript">
alert('test');
</script>

こんな感じで書くと画面にアラートが出るので、これを使って色々頑張っていく。

例
読み込み時の要素の高さを出したいとき

<script type="text/javascript">
$(function(){
 alert($('.調べたいクラス名').innerHeight);
});
</script>

ボタンを押したときに要素の高さを出したいとき

<script type="text/javascript">
$('.ボタンの名前').click(function(){
 alert($('.調べたいクラス名').innerHeight);
});
</script>

結論

逃げないで頑張ろう