Google Chrome DevTools で jQuery のソースマップを有効にする方法

2024-04-02

jQuery 1.10.2.min.map が 404 エラーを発生させる原因と解決策

問題概要

原因

この問題は、以下の 2 つの原因が考えられます。

ファイルの欠損: jquery-1.10.2.min.map ファイルがプロジェクトに存在していない、または誤って削除された可能性があります。

解決策

以下の方法で問題を解決できます。

ファイルの追加

jquery-1.10.2.min.map ファイルが存在しない場合は、以下の手順でプロジェクトに追加します。

ダウンロードしたファイルをプロジェクトの適切な場所に配置します。

ファイルパスの確認

jquery-1.10.2.min.map ファイルが存在する場合は、ファイルパスが正しく設定されていることを確認します。

方法 1: <script> タグの src 属性に jquery-1.10.2.min.map ファイルのパスを指定する。

<script src="jquery-1.10.2.min.js"></script>
<script src="jquery-1.10.2.min.map"></script>

方法 2: data-source-map 属性を使用して jquery-1.10.2.min.js ファイルに jquery-1.10.2.min.map ファイルのパスを指定する。

<script src="jquery-1.10.2.min.js" data-source-map="jquery-1.10.2.min.map"></script>

上記の方法で問題が解決しない場合は、以下の点を確認してください。

使用している jQuery のバージョンが正しいことを確認してください。
ブラウザのキャッシュをクリアしてみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery 1.10.2 サンプル</title>
</head>
<body>
  <script src="jquery-1.10.2.min.js"></script>
  <script src="jquery-1.10.2.min.map"></script>

  <script>
    $(document).ready(function() {
      // jQuery コード
    });
  </script>
</body>
</html>

コードの説明

1 行目: HTML ファイルの宣言
2 行目: 文字コードの指定
3 行目: メタビューポートの設定
4 行目: タイトルの設定
9 行目: jquery-1.10.2.min.js ファイルの読み込み
12-14 行目: jQuery コード

上記のコードを参考に、プロジェクトに jquery-1.10.2.min.js と jquery-1.10.2.min.map ファイルを正しく読み込み、jQuery を使用してください。

jQuery 1.10.2.min.map の 404 エラーを解決するその他の方法

CDN の使用

jQuery の CDN (Content Delivery Network) を使用することで、jquery-1.10.2.min.js と jquery-1.10.2.min.map ファイルをプロジェクトにダウンロードすることなく使用できます。

以下のコードは、jQuery の CDN を使用して jquery-1.10.2.min.js と jquery-1.10.2.min.map ファイルを読み込む方法を示しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery 1.10.2 サンプル</title>
</head>
<body>
  <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="https://code.jquery.com/jquery-1.10.2.min.map"></script>

  <script>
    $(document).ready(function() {
      // jQuery コード
    });
  </script>
</body>
</html>