概要
新しいツールのリリース時に、一部の広告プレビューを含む div がすべてのブラウザーで表示されるわけではありませんでした。私の同僚のブラウザーのバージョンはまったく同じでしたが。(長い時間) デバッグを行った後、原因となっている Chrome プラグインを見つけることができました。
以下、全文読めます。私はこれをQ&A スタイルとしてマークしたので、考えられる答えについて考えることさえ気にしないでください。ブログを (まだ) 持っておらず、共有したいので、ここに投稿します。同じ (同様の) 問題を抱えているあなたや同僚のプログラマーの助けになれば幸いです。
問題
本日、従業員と顧客から提供されたデータに基づいて広告を作成する社内 CRM アプリケーションの新しいツールをリリースしました。このツールには、すべての広告をエクスポートする前に、これらの広告の一部 (5 つ) を表示する機能があります。このプレビューは、提供されたデータを使用して広告を作成する Ajax 呼び出しによって行われます。このツールを localhost で開発し、テスト サーバーにアップロードしたところ、すべてうまくいきました。複数の異なるユーザーを持つ複数のコンピューター/ブラウザーで、すべてが正常に機能していました。このものを解放する時が来ました。
ファイルをサーバーにアップロードし、さまざまなデータベース テーブルを追加して、最終チェックのためにページへのアクセスを許可された唯一のユーザーにしました。私は自分のコンピューター（Chromeを搭載したWin 7）でいくつかのチェックを行い、すべてが必要に応じてローカルホストとテストサーバーと同じように機能しました. 開発責任者である私の同僚も、このツールを使用しようとしていました。それはうまく機能しますが...
何らかの理由で、彼が自分のコンピューター (Chrome を搭載した Win 7) にログインすると、「プレビュー広告」が表示されませんでした。最初は、JavaScript で何かをしなければならないと考えていました。キャッシュを機能させるためにキャッシュを更新またはクリアする必要がありましたが、それでも問題は解決しませんでした。コンソールもエラーをスローしていなかったので...
多分それは彼のアカウントで何かをしなければなりませんか？彼は開発の責任者であり、もちろん私たちは彼をブロックしたいと考えています。ACL の管理について考えたのは、訪問できるように特別な規則がいくつかあったため、従業員は訪問できなかったからです。何かを忘れたのかもしれませんが、認証ログにエラーをスローする必要がありました。しかし、彼が Firefox または私のコンピューターにログインすると、すべてが正常に機能します。したがって、それとは何の関係もありません。
次に、要素インスペクターを調べて、広告が DOM に正しく読み込まれたかどうかを確認するという巧妙なアイデアを思いつきました。あるようで、不思議です。リロード時に広告ラッパーを一時的に非表示にするいくつかのクラスをオフにしようとしましたが、解決しませんでした。そこで、これらの要素をいじり始めました。それらをドラッグして、クラスとスタイルを切り替えましたが、何も機能していないようでした。<table>しかし、その後... 彼は、広告自体を含む を、テーブルをラップしていた div の外にドラッグするというアイデアを思いつきました。このラッパーには読み込みインジケータも含まれており、それらをより簡単に切り替えることができるため、この構造になっています。そして、テーブルが現れました。これで、ラッパーで何かを行う必要があることがわかりました。しかし、何？
解決
試行錯誤とデバッグをブラウザでやり直した後、「同じ Chrome バージョン」、「同じ CSS」、「f5'd」、「プラグイン」などのことを大声で言い始めました。私の同僚は彼のコンピューターに駆け寄り、おそらくこれに関係していると言いました。Adblock plusをオフにしました。ページを更新すると、div (広告ラッパー) が表示されました。
これで、問題の原因がわかりましたが、その理由を知りたかったので、すべての従業員がツールにアクセスできるようにしたいと考えています。従業員がこのプラグインを使用している場合はどうなりますか? 彼に Adblock を無効にするよう強制することはできません。
<div id="ads-wrapper">
<table> ... </table>
</div>
ここで何が見えますか？<div>ID「ads-wrapper」のA。Adblocker がこの ID の要素を隠しているようです。それでは、要素インスペクターでその属性を変更してみましょう。その値を「プレビュー」、「ラッパー」、さらには「広告」に変更しても問題ありません。ただし、「ads」と「wrapper」を組み合わせると失敗します。「ラッパー」を「コンテナ」に変更すると、要素が非表示になります。
最初の考え：正規表現。おそらく、パターンに一致する ID を持つ要素をフィルタリングし、単純に非表示にする正規表現です。
これらの Chrome プラグインのソースを表示する方法をググってみました。別の同僚が独自のプラグインを作成しており、私は彼の HTML と CSS を少し手伝ったので、それが JavaScript で作成されていることがわかりました。ソースはどこかにあるはずです。インストールされたプラグインのソースを見つけることができる場所を説明するこの記事を見つけました。プラグインのフォルダーを開くと、大量の JavaScript ファイルが見つかりました。私はそれらをすべて開き、すべてのファイルを吐き出す必要がないことを期待して、「正規表現」などを一括検索しました。何もない。
しばらくして、 の 189 行を見つけましたbackground.js。幸いなことに、これは私が開いた 2 番目のファイルだったので、すぐに見つかりました。
addSubscription("https://easylist-downloads.adblockplus.org/liste_fr+easylist.txt", "Liste FR+EasyList");
この関数で使用されているリンクを Chrome で開いたところ、覚えたくないタグ、URL、その他の膨大なリストが表示されました。
行 5876 で、次の行を見つけました。
...
###ads-wrapper
...
最初の 2 つは、次のよう##に言うのに使用されているようです。後で のような行を見つけることができるから##.ads-wrapperです。以前に試したすべての属性値がこのファイルで見つかりました。(background.jsで、非表示にする一致を含むいくつかのファイルを見つけることができます。)
結論
.txtを見て、クラス、ID、その他の属性、除外されている URL を確認してください。それらを覚えようとせず、ちらりと見てください。これらの値にはいくつかのパターンが見られるので、広告を表示するつもりがなくても、一部のプラグインがコンテンツをブロックすることを覚えておいてください!
公開されているアクセス可能なサイトの訪問者が次のようなメッセージをメールで送信してくる場合、それは本当に頭痛の種になる可能性があります。
サイトが機能していません。フーバーが見えない…
うまくいけば、この記事を少し考えて、次のように考えてください。
使用済みリンク
- https://blog.stackoverflow.com/2011/07/its-ok-to-ask-and-answer-your-own-questions/
- http://en.wikipedia.org/wiki/Access_control_list
- https://chrome.google.com/webstore/detail/adblock-plus/cfhdojbkjhnklbpkdaibdccddilifddb
- http://saravananthirumuruganathan.wordpress.com/2010/05/01/how-to-read-the-source-code-of-chrome-and-firefox-extensions/
- https://easylist-downloads.adblockplus.org/liste_fr+easylist.txt