検証ツールに出てくる、このエラー（Error in event handler: Error: Failed to read the 'cssRules'......）を消したい。解消方法が知りたい。

Question

検証ツールに下記のようなエラーがたくさん出てきます。
これは何をしたら消えるのでしょうか。
また、

Error in event handler: Error: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
at findStyleSheets (<URL>)
at <URL>

Error in event handler: Error: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
at findStyleSheets (chrome-extension://diebikgmpmeppiilkaijjbdgciafajmg/scripts/content-script.js:1014:12)
at chrome-extension://diebikgmpmeppiilkaijjbdgciafajmg/scripts/content-script.js:1052:13

こうなった経緯としては、
ドロワーメニューを実装してからです。↓↓

  <!-- ここからドロワーメニュー -->
  <script type="text/javascript">
    function toggleNav() {
      var body = document.body;
      var hamburger = document.getElementById('js-hamburger');
      var blackBg = document.getElementById('js-black-bg');

      hamburger.addEventListener('click', function () {
        body.classList.toggle('nav-open');
      });
      blackBg.addEventListener('click', function () {
        body.classList.remove('nav-open');
      });
    }
    toggleNav();
  </script>
  <!-- ここまでドロワーメニュー -->

<header class="header">
    <div class="flex-sb">
      <p class="header-logo"><a href="/"><img class="header-logo-img" src="img/logo.png" alt="ロゴ">EXSAMPLE株式会社</a></p>

      <!-- gnav -->
      <nav class="gnav">
        <ul class="gnav-list slider">
          <li class="gnav-item"><a href="#strong">当社の強み</a></li>
          <li class="gnav-item"><a href="#service">事業内容</a></li>
          <li class="gnav-item"><a href="#works">施工実績</a></li>
          <li class="gnav-item"><a href="#flow">施工の流れ</a></li>
          <li class="gnav-item"><a href="#news">お知らせ</a></li>
          <li class="gnav-item"><a href="#about">会社概要</a></li>
          <li class="gnav-item"><a href="#faq">よくある質問</a></li>
        </ul>
      </nav><!-- /gnav -->
    </div><!-- /flex-sb -->
    <div class="hamburger" id="js-hamburger">
      <span class="hamburger__line hamburger__line--1"></span>
      <span class="hamburger__line hamburger__line--2"></span>
      <span class="hamburger__line hamburger__line--3"></span>
    </div>
    <div class="black-bg" id="js-black-bg"></div>
  </header>

/* ここからハンバーガーメニュー */
@media screen and (max-width: 959px) {
  .gnav {
    position: fixed;
    right: -100vw;
    top: 0;
    width: 100vw;
    height: 100vh;
    padding-top: 80px;
    background: $color-bg-sub;
    transition: all .6s;
    z-index: 200;
    overflow: auto;
    text-align: center;
  }

  .gnav-item {
    display: block !important;
  }

  .hamburger {
    position: absolute;
    top: 0px;
    right: 0;
    width: 60px;
    height: 55px;
    cursor: pointer;
    z-index: 300;
  }

  .hamburger__line {
    position: absolute;
    right: 20px;
    width: 20px;
    height: 3px;
    background: #333;
    transition: all .6s;
  }
  
  .hamburger__line--1 {
    top: 18px;
  }
  .hamburger__line--2 {
    top: 26px;
  }
  .hamburger__line--3 {
    top: 34px;
  }

  .black-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 200;
    background: $color-bg-sub;
    opacity: 0;
    visibility: hidden;
    transition: all .6s;
    cursor: pointer;
  }


  /* 表示された時用のCSS */
  .nav-open .gnav {
    right: 0;
  }

  .nav-open .black-bg {
    opacity: 0.8;
    visibility: visible;
  }

  .nav-open .hamburger__line--1 {
    transform: rotate(45deg);
    top: 20px;
  }

  .nav-open .hamburger__line--2 {
    width: 0;
    left: 50%;
  }

  .nav-open .hamburger__line--3 {
    transform: rotate(-45deg);
    top: 20px;
  }

}
/* ここまでハンバーガーメニュー */

/* ハンバーガーメニュー詳細調整 */
@media screen and (max-width: 959px) {
  .gnav-item a.current::after {
    border-bottom: none;
  }
  .gnav-item:last-child>a {
    padding: 0;
  }
}

お詳しい方、どうぞよろしくお願いいたします。

Comments

[m.ts10806]

「お詳しい方」の目に留まらせたいのでしたら[Chrome extension]のタグはあったほうが良いと思います
https://teratail.com/tags/Chrome+extension

Answer 1

「diebikgmpmeppiilkaijjbdgciafajmg」で検索したら出てきました。この長い文字はchrome-extensionのIDです。

• Error in console · Issue #159 · livestyle/issues · GitHub

livestyleを使われてますよね？

お詳しい方、どうぞよろしくお願いいたします。

Sublime TextとChromeで双方向の同期編集ができるプラグインですか。chrome-extensionは知ってましたがlivestyleという便利なものがあることは知りませんでした。

livestyleの問題であってJavaScript、HTML、jQuery、CSSの問題でもプログラミングの質問でもないと思います。
livestyleが問題を修正するのを待ちましょう。

Comments

[Web-Fuji]

ご回答ありがとうございます。
livestyleという言葉は初耳で、そのようなツールは使った覚えがないですね。
以前Sublime Textを使っていた時期はありましたが、そのようなプラグインはインストールした覚えありませんし、今検索してもその名称のプラグインは見つかりませんでした。。。

[querykuma]

> 以前Sublime Textを使っていた時期はありましたが、そのようなプラグインはインストールした覚えありませんし、今検索してもその名称のプラグインは見つかりませんでした。。。

エラーがChrome拡張機能のlivestyleをインストールしたことを示しています。
chrome://extensions/を開き右上のデベロッパーモードをクリックし、「livestyle」と「diebikgmpmeppiilkaijjbdgciafajmg」で検索して結果をお知らせください。
あなたが知らない間にインストールされてしまったのでは？

[Web-Fuji]

おっしゃる通り、Chromeの拡張機能で「livestyle」をインストールしてしまっていました。
（なんかこの拡張機能を追加した記憶がかすかにありますw）

Chromeからこの拡張機能を削除し、無事解決できました！
ありがとうございました！