jQuery 1.9 のソースマップ対応で圧縮版でもデバッグが簡単になった話
jQuery 1.9 がリリースされました。1.9 の新機能の中ではあまり注目されていませんが、ソースマップに対応したのが地味に便利そうです。 というのも、圧縮版の jquery.min.js を使っていると 何か問題が起きたときにスタックトレースを眺めても jQuery の部分が意味不明 デバッガーで jQuery のソースにステップインしても意味不明 といった理由で、開発中には非圧縮の jquery.js を使うことが多かったわけです。 それが、1.9 からはソースマップに対応したので圧縮版のままでのデバッグが簡単になってます。 超簡単な使い方 ソースマップに対応したブラウザーは現時点では Google Chrome のみなので、Google Chrome の手順を説明します。 (Firefox はソースマップへの対応を計画中らしい) 事前準備を忘れずに Google Chrome で
Chromeの「デベロッパーツール」のコンソールに「DevTools failed to parse SourceMap」と表示される | 逆引きガイド | ablogcms.org
Javascriptを追加していない、もしくは何の問題もないのに、Chromeの「デベロッパーツール」のコンソールから、以下の注意文が消えない現象を確認しています。バージョン2.1.6.x〜2.1.7.x以降で発生するようになったと思われます。 DevTools failed to parse SourceMap: （a-blog cmsを設置したURL）js/library/underscore/underscore-min.map これは、Chromeの仕様と、a-blog cms本体が導入している外部JavaScritライブラリによるもので、動作に影響するエラーではありません。 「DevTools failed to parse SourceMap」とは Chromeの「デベロッパーツール」はJavaScriptファイルが圧縮されていた場合、同名の「ソースマップ」を自動的に探し、Ja
Chromeデベロッパーツールで圧縮(minified)されたJavaScriptを読みやすく表示する - Qiita
以下の内容は、Googleの開発者向けページにある 読みやすい形式への JavaScript の変換 ほぼそのままです。 (引用) JavaScript を読みやすい形式に変換するには、Chrome DevTools で [Pretty-Print] アイコンをクリックします。 実際にやってみます。 たとえばGoogle Earthの app_ja.js のソースコードは圧縮されているので次のように表示されますが、これだと読める気がしませんね。 そんなときには、 Pretty Print {} のアイコンをクリックします。 すると、 app_ja.js:formatted というタブの中に、読みやすく整形されたスクリプトが表示されます。 ちなみに、デバッグ時のブレイクポイントはformatted側に設定すれば良いので、既定のAPIを使うような開発作業も楽になりますね。
Chrome で SameSite=None に関する Cookieについての警告が表示される
例えば、以下のメッセージです。 A cookie associated with a cross-site resource at http://example.com/ was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/508814734603
【Chrome】”A cookie associated with …”の警告の内容と対処法について【開発者ツール】 | webico blog
こんにちは、しばです。 最近サイト制作をしていて、”A cookie associated with …“から始まる警告がChromeのデベロッパーツール(開発者ツール)に表示されていることに気づきました。 警告文だからそこまで気にしなくていいだろうと思いつつ、多い時で30個以上同じメッセージの警告が表示されるとやはり気になる…(´･ω･`) テスト環境・本番環境問わず表示されるので、聞かれた時説明できるようにするべく警告の内容とその対処法を調べてみました。 先に結論を言うと、現在閲覧中のサイトはほぼ関係ありません。 ブラウザに保存されているクッキーに関する警告であって、対処が必要になるのはクッキーを発行しているサービス側(例えばGoogleだったりFacebookだったり)の方です。 詳細をまとめてみたので、ご参考になれば幸いです！ （2020/3/30）最新情報を記事末尾に追記しました
「A Parser-blocking, cross-origin script,..., is invoked via document.write.」警告が表示される問題についてメモ
このブログのコンソールに、「A Parser-blocking, cross-origin script, http://ajax.cloudflare.com/cdn-cgi/nexp/(略)/cloudflare.min.js, is invoked via document.write. This may be blocked by the browser if the device has poor network connectivity.」が表示されていることに気が付きました。 この警告表示（エラーではなくWarnings）についてメモしておきます。 目次 1. 表示される警告表示2. 意味3. 警告についての詳細情報4. 対策について5. 今回はcloudflareの.jsなので･･･6. 多いのはgoogle analytics？ スポンサーリンク 表示される警告表示 Ch
極めろ！！Google Chrome Devtools 52の関節技 - Qiita
転職ナビのフロントエンドを担当しています、@sueshinです。 Livesense - 関 Advent Calendar 2017、22件目をお送りします。 どうぞ宜しくお願いします。 はじめに フロントエンドでよく注目されるJavaScriptではなく、 地味で渋いまるで関節技のような、Google Chrome Devtoolsを使った技術をtipsの形式でまとめました。 免責事項 ショートカットなどは全てMacのキーボード操作にしています。Windowsユーザーは適宜読みかえてください。 Chromeのバージョンは63系に基づいて紹介しています。 52の関節技！！ Elements 1.hover時のコンポーネントのCSSルールを表示 使い方 ①DOM要素を選択 ②Stylesペインを開く ③:hovをクリック ④hoverフィルタを適用 2.対応するCSSファイルを開く 使い方
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能
Webアプリのデバッグやチューニングに役立つ、Chrome Developer Toolsの主要機能を、スクリーンキャプチャ中心で簡潔に紹介。2014年10月に最新情報に改訂。 モダンブラウザーの中でGoogle Chromeは最後発ながら、その機能の潤沢さ、便利さ、高速さからシェアを大きく伸ばしている。そして、今やほとんどのブラウザーではWindowsの場合F12キーを押すことで（Macの場合はCommand＋Option＋Iキーで）手軽に各ブラウザー搭載のデベロッパーツールを利用できるが、特にChromeのデベロッパーツールは、非常に機能が豊富なため、利用している人もかなり多い。 本稿では筆者がよく使う機能や、使うと便利な機能を中心に、Chromeのデベロッパーツールについて紹介していく。なお、本書は執筆時点で、最新のChrome 38を使用している。 機能ふかん 残念ながら、Chro
Chrome DevToolsを使いこなそう！ Web開発に必須なブラウザ開発ツールによるデバッグの基本 - エンジニアHub｜若手Webエンジニアのキャリアを考える！
Chrome DevToolsを使いこなそう！ Web開発に必須なブラウザ開発ツールによるデバッグの基本 開発者ツール（DevTools）とは、ブラウザに搭載されているデバッグツールです。多岐にわたる技術の集合体であるWebページやWebアプリケーション、いわゆるフロントエンドの開発において、なくてはならないツールです。 皆さん、どうもこんにちは。今回で3度目のエンジニアHubの登場となる大竹智也です。春の季節もそろそろ終わりを迎え、新生活を迎えた人たちも新たな環境に慣れてくる時期だと思いますが、元気にお過しでしょうか。 前回までエディタの話ばかりしてきましたが、今回はエディタから離れてWebブラウザ（以下、ブラウザ）の話をしたいと思います。ただ、ブラウザの話といっても、エンジニアHubは開発者向けの媒体なので、ブラウザに搭載されている開発者ツール（Developer Tools）のお話を
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
