Фрагменты Google Chrome: идентификатор '...' уже объявлен - PullRequest
Новая
       41

Фрагменты Google Chrome: идентификатор '...' уже объявлен

2 голосов
/ 21 апреля 2019

Я использую фрагменты Google Chrome (внутри Dev Tools) для разработки и тестирования JS.

При объявлении классов ES6 консоль выдает

Uncaught SyntaxError: Идентификатор 'Foo' уже объявлен в ...

после первого запуска. 

class Foo {
constructor(val) {
        this.bar = val;
    }
}

var f = new Foo('myVal');
console.log(f.bar); // prints 'myVal'

Я провел некоторое исследование и обнаружил, что перенос кода в область видимости блока с {} поможет избежать этой проблемы.

Но когда я делаю это, хотя код выполняется без ошибок, Chrome не распознает никаких последующих изменений, которые я могу сделать с моим кодом.

Итак, если я изменил приведенный выше код на следующий: 

{
    class Foo {
    constructor(val) {
            this.bar = val;
        }
    }
}

var f = new Foo('myVal');
console.log(f.bar); // prints 'myVal'

Пока все отлично работает.

Теперь я понимаю, что с моим классом есть проблема, и я изменяю код на следующий: 

{
    class Foo {
    constructor(val) {
            this.bar = 'MyHardcodedVal'; // Here is the changed code
        }
    }
}

var f = new Foo('myVal');
console.log(f.bar); // STILL prints 'myVal'

Как видите, изменения, которые я внес в мой класс, не вступают в силу.

Похоже, что Google Chrome поместил мой код в изолированную программную среду, которая защищена от моего редактирования.

Чтобы заглянуть за кулисы и посмотреть, что делает Google Chrome, нужно ввести преднамеренную ошибку в код, а затем щелкнуть источник ошибки, отображаемой в консоли Chrome. Там вы увидите, что код для класса все еще старый и не изменился вообще, в то время как код, находящийся за пределами области действия блока, обновлен.

A few pieces of important information are highlighted: (let) The intentional mistake / ('hardcoded') The change in my class / (VM157) Top and down where you can click to see how the code looks like behind the scenes

Here you can see that behind the scene the edit to the code that was in block scope is not existent

Я всегда мог закрыть вкладку, в которой я работаю, и открыть ее снова, но это не практично.

Что я делаю не так?

Есть ли разумный способ использовать сниппеты для таких тестов?

Надеюсь, что это имеет смысл!

1 Ответ

4 голосов
/ 24 апреля 2019

Судя по комментариям, решение состоит в том, чтобы заключить в скобки весь фрагмент . 

{
  class Foo {
    constructor(val) {
      this.bar = 'MyHardcodedVal'; // Here is the changed code
    }
  }
  var f = new Foo('myVal');
  console.log(f.bar); // STILL prints 'myVal'
}
...