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の要素やネットワークが検査できます
![Screen Recording 2024-03-04 at 12.37.29.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/fed6c9c9-6ca5-d448-933b-c574d0ed1b5a.gif)




## 設定手順

###### 1. Safari設定画面を開ける

```[Safari] -> [Settings]```

![open setting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/8149e7f3-34de-3d8c-6c85-45d15117cacb.png)


###### 2. 設定画面

```advanced``` パネルを選択
```Show features for web deverlopers```チェックボックにチェックを入れます。↓
![Screenshot 2024-03-04 at 12.04.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/d153b02e-7eb5-e1e0-ae3b-4fa9bc2ff2d7.png)

###### 3.Safari 再起動
![Screenshot 2024-03-04 at 12.07.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/da8edbbe-8103-284f-d7a6-08fbc691cbc0.png)

###### 4.ウェブベースアプリを立ち上げる
下の「**模擬Reactプロジェクト用意**」項目に詳細を書いておきます。ご参加ください。
###### 5.Simulatorを開け

↓他の端末を選択する場合は「```Device```」->端末が選択できます
![Screenshot 2024-03-04 at 12.14.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/b84919d8-a3a7-caaa-f854-81feea82ae2a.png)

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


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

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

![Screenshot 2024-03-04 at 12.26.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/ec15c0c7-bccd-1bb5-cdd7-c8c754bbdfc8.png)

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

![Screenshot 2024-03-04 at 12.27.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/96f927a9-cc60-cf93-3c67-3de33a8f59ce.png)

###### 7.結果はこちら↓

![Screenshot 2024-03-04 at 12.36.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/ec75a5a4-f558-ec7f-164f-be7d6321b9db.png)

## 模擬Reactプロジェクト用意
#### 1.初期設定
```
npx create-react-app test-debug
```
#### 2.ロジック作成

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

```javascript

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.アプリ立ち上げる

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


# 最後

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