MacOsのSimulator端末のSafariでReactやNextなどウェブベースアプリをデバッグ

概要

ウェブベースアプリは諸々のiOS画面開発する際にMacOsのSimulator端末を利用します。バグが出る場合はどのように解決しますか？こちらの記事はSimulator端末のSafariでどのようにウェブインスペクト画面を開く方法を説明いたします。

ウェブインスペクトもChromeでデベロッパーツールだと言われます。

環境

• 端末：MacOS M1
• OSバージョン：14.3.1 Sonoma
• Safariバージョン：17.3.1
• xCodeバージョン: 15.2
• Simulatorバージョン: 15.2

模擬Reactプロジェクト行なうため

• Nodejs: v21.6.0
• npx: 10.2.4

やりたい事

ウェブインスペクト画面を開けます。
console logやHTMLの要素やネットワークが検査できます

設定手順

1. Safari設定画面を開ける

[Safari] -> [Settings]

2. 設定画面

advanced パネルを選択
Show features for web deverlopersチェックボックにチェックを入れます。↓

3.Safari 再起動

4.ウェブベースアプリを立ち上げる

下の「模擬Reactプロジェクト用意」項目に詳細を書いておきます。ご参加ください。

5.Simulatorを開け

↓他の端末を選択する場合は「Device」->端末が選択できます

見つけられない場合はcommand + spaceをして、Spotlight searchが出てきてSimulatorとサーチしてください。
もしまだ見つけられない場合は恐らくxCodeが未設定だと思っておりますから、ご設定ください

6.Simulator端末のウェブインスペクト開ける

↓一先ずSimulator端末のSafariでウェブベースアプリを開けます。

↓MacのSafariに戻って、上メニューで→[develop]→該当する端末選ぶ→該当するURLを選ぶ

7.結果はこちら↓

模擬Reactプロジェクト用意

1.初期設定

npx create-react-app test-debug

2.ロジック作成

src/App.jsに以下の内容を入れます

import React from "react";
function App() {
  const [counter,setCounter] = React.useState(0);
  console.log('counter: ==== '+counter)
  return (
    <div className="App">
      <h1> Counter app</h1>
      <div> {counter}</div>
      <div>
          <button onClick={ ()=>{
            setCounter((pre) => { return pre+1});
          } }>
            Add +1
          </button>
      </div>
      <div>
          <button onClick={ ()=>{
            setCounter((pre) => { return pre-1});
          } }>
            Minus -1
          </button>
      </div>
      <div>
          <button onClick={ ()=>{
            setCounter(0);
          } }>
            reset to zero
          </button>
      </div>
    </div>
  );
}
export default App;

3.アプリ立ち上げる

npm start
# デフォルトのポートは3000

最後

最後までご覧になりましてありがとうございます。
役に立ったらハートやシェアーをお願いします。
何かご不目点があれば、コメントをご記入ください。