アジェンダ Source Mapsとは? テスト環境 Sassのアップデート Chrome Developer Toolsの設定 確認用ファイル Google Chrome Canaryで確認 まとめ Source Mapsとは 最近での開発でHaml、SCSS(sass)、CoffeeScriptなどの拡張メタ言語を使って開発する機会が増えてました。 拡張メタ言語はコンパイル・圧縮等をして出力しますが、出力されたデータは多少デバックするのがめんどくかったりすることがあります。 Source Mapsファイルはコンパイルする際、出力元データのマッピング情報が記載され、その情報をもとにブラウザやデバックツールからソースを解読してくれます。 テスト環境 OS:windows7 ブラウザ:Google Chrome Canary Chrome Developer ToolsがSource Map
![【Source Maps】Chrome CanaryでSCSS(Sass)のデバックを試してみました。 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/ac657d721f8bf45a060ff18855bd3a3285bd62b0/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2012%2F09%2Fgif.gif)