制作知識スマホ対応Webサイト制作時のデバッグ方法まとめ・スマートフォン側とPC側両方の設定を解説!スマホからのWebサイト閲覧利用率がPCからの閲覧利用率を超えて久しいですね。23:34だいぶ前に、スマホ対応Webサイト制作時のデバッグ方法まとめ・スマートフォン側とPC側両方の設定を解説!といいう記事を書いたことがありました。ここで紹介している内容の1つが、「スマホ(iPhone)で表示したサイトをMacのSafariの検証ツールを使ってデバッグできる」というものでした。先ほどのブログで紹介した内容は「iPhoneとMacをケーブルで接続する」という条件が必要だったのですが、いつの間にか、初期設定さえ行えば後はケーブル接続不要でiPhone・iPadで表示したサイトのデバッグをMacのSafariでおこなうことができるようになっていました。IDでログインされていること必要な条件はこれだけ!他人のApple製品を使わない限りはこの条件に当てはまることはまずなさそうですね。設定についてそれでは、iPhone・iPadで表示したサイトのデバッグをMacでおこなうための設定について見ていきましょう!1、iPhone・iPad側で必要な設定を行う(WebインスペクタをONにする)基本的にはスマホ対応Webサイト制作時のデバッグ方法まとめ・スマートフォン側とPC側両方の設定を解説!手順3、iPhone側で必要な設定を行うで紹介している内容と同じですが、iPhone・iPad側でWebインスペクタの設定をONにします。このブログを書いている時点ではiOS14.8のiPhoneで検証していますが、「設定」→「Safari」→「詳細」と進んでいくと「Webインスペクタ」という項目がありますので、これをONにします!2、MacのSafari側で「開発メニューを表示」をONにするこちらも以前のブログにほぼ同じことを紹介していますが、MacのSafariで「開発メニューを表示」をONにします。これで、MacのSafariで検証ツールを使うことができるようになります。使うことができている方は、今回の設定は不要です!この時点でiPhoneやiPad側のSafariで何かのサイトを開いてみてください!そして、Safariに表示された開発メニューを選択した際に、自分のiPhoneやiPadが表示されていて、かつ今iPhoneやiPad側で表示しているサイトがメニューに表示されていれば、次の設定は不要です!3、iPhone・iPadとMacをケーブル接続し、必要な設定を行う2の最後でご紹介した内容に当てはまらなかった方は、さらに設定を行なっていきましょう!iPhoneやiPadとMacをケーブルで接続し、Finderから接続したiPhoneやiPadを選択します。出てきた画面の中の「一般」を選択し、その中にある「このiPhone(iPad)が接続されているときに自動的に同期」のチェックを外します。チェックを外したら、上記画像には含まれていませんが、1番右下にある「同期」ボタンを押します。Proを購入しました!Android側でもデバッグに役立つ新情報がありそうでしたら、またブログにしてみたいと思います!シェアするツイートフォローするarrown39関連記事JavaScriptのreduce関数の処理の流れを図解化してみるJavaScriptにreduceという関数があるのですが、reducce関数は非常に便利なものです。-SourceTreeを使ってローカルリポジトリにコミット&履歴操作-Webサイト制作・アプリケーション開発をしていると、ソースコードの追記・修正をするなんていうことは日常茶飯事にあります。以前ご紹介させていただいた無料で使えるコードエディタ「Brackets」。Scriptネタを書いてみたいと思...記事を読むJavaScriptでシンプルに月末日を取得する方法こんにちは!ケインコスゲです。今日はJavaScriptを使って、シンプルに月末日を取得する方法についてご紹介したいと思います。...記事を読むVue.jsでカレンダーをプラグインなしで作ってみた・コンポーネントにも応用可能!こんにちは!ケインコスゲです。今日はシンプルに「Vue.jsでカレンダーをプラグインなしで作ってみた」というブログを書いてみたいと思...記事を読むWordPressサイト常時SSL化(HTTPS化)対応・設定方法と注意点こんにちは!ケインコスゲ(@keinkosuge)です。Scriptで特定のスプレッドシートを自動で1日1回取得しGoogleDriveにバックアップ保存するグループ英語コーチング学習Gariben。「自分を動かす原動力は何か?」真剣に悩み考え探した経緯を残してみるグループ英語コーチング学習Gariben。