質問編集履歴

3 直接の原因を追加した

plum_shiga

plum_shiga score 9

2017/12/01 09:06  投稿

Edgeで開発者ツールを立ち上げたときとそうでないときでセレクタの解釈が異なる問題
Edgeで開発者ツールを立ち上げたときとそうでないときでセレクタの解釈が異なる問題について
## 問題
Edgeで、開発者ツールを立ち上げたときのみ期待通り動き、
開発者ツールを閉じると期待通り動かないことがあった
## 確認したこと
以下2件のケースを発見したので確認した。
[console.log() が残っていたケース](http://blog.szmake.net/archives/958)
[キャッシュが残っていたケース](http://bps-tomoya.hateblo.jp/entry/2015/06/10/IE11_%E3%81%A7%E9%96%8B%E7%99%BA%E8%80%85%E3%83%84%E3%83%BC%E3%83%AB%E3%82%92%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%92%E3%81%A6%E3%81%84%E3%81%AA%E3%81%84%E3%81%A8%E6%9C%9F%E5%BE%85%E3%81%97%E3%81%9F%E5%8B%95)
いずれの解決方法を試みても、私の問題は解決しなかった。
Edge特有かと思い、Microsoftのdeveloper toolsのWebページも念のために確認したが、
特に有力な情報は得られず。
## 最終的な修正
下記は.jsのコード。
jqueryのために使っていたセレクタに不備があったので、それを修正すると期待通りの動作を確認できた。
直接の原因は括弧のとじ忘れだった。  
 
```diff
-               $("input[value=hoge").parent().show();
+               $("input[value=hoge]").parent().show();
```
### 修正の経緯
そもそも開発者ツールoff時のみ特有なので、
基本的にはalert() で追いかけました。
## 知りたいこと
開発者ツールのon/offでセレクタやDOMに解釈の違いがあるのかどうか。
その他、ブラウザの仕組みや挙動について良書、良文献(ページ)があればご教授ください。
  • JavaScript

    24316 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    9510 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

2 修正の経緯を追加

plum_shiga

plum_shiga score 9

2017/11/30 11:01  投稿

Edgeで開発者ツールを立ち上げたときとそうでないときでセレクタの解釈が異なる問題
## 問題
Edgeで、開発者ツールを立ち上げたときのみ期待通り動き、
開発者ツールを閉じると期待通り動かないことがあった
## 確認したこと
以下2件のケースを発見したので確認した。
[console.log() が残っていたケース](http://blog.szmake.net/archives/958)
[キャッシュが残っていたケース](http://bps-tomoya.hateblo.jp/entry/2015/06/10/IE11_%E3%81%A7%E9%96%8B%E7%99%BA%E8%80%85%E3%83%84%E3%83%BC%E3%83%AB%E3%82%92%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%92%E3%81%A6%E3%81%84%E3%81%AA%E3%81%84%E3%81%A8%E6%9C%9F%E5%BE%85%E3%81%97%E3%81%9F%E5%8B%95)
いずれの解決方法を試みても、私の問題は解決しなかった。
Edge特有かと思い、Microsoftのdeveloper toolsのWebページも念のために確認したが、
特に有力な情報は得られず。
## 最終的な修正
下記は.jsのコード。
jqueryのために使っていたセレクタに不備があったので、それを修正すると期待通りの動作を確認できた。
```diff
-               $("input[value=hoge").parent().show();
+               $("input[value=hoge]").parent().show();
```
### 修正の経緯  
そもそも開発者ツールoff時のみ特有なので、  
基本的にはalert() で追いかけました。  
 
## 知りたいこと
開発者ツールのon/offでセレクタやDOMに解釈の違いがあるのかどうか。
その他、ブラウザの仕組みや挙動について良書、良文献(ページ)があればご教授ください。
  • JavaScript

    24316 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    9510 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1 jQuery関連なので `jQuery` タグを追加しました

plum_shiga

plum_shiga score 9

2017/11/29 16:48  投稿

Edgeで開発者ツールを立ち上げたときとそうでないときでセレクタの解釈が異なる問題
## 問題
Edgeで、開発者ツールを立ち上げたときのみ期待通り動き、
開発者ツールを閉じると期待通り動かないことがあった
## 確認したこと
以下2件のケースを発見したので確認した。
[console.log() が残っていたケース](http://blog.szmake.net/archives/958)
[キャッシュが残っていたケース](http://bps-tomoya.hateblo.jp/entry/2015/06/10/IE11_%E3%81%A7%E9%96%8B%E7%99%BA%E8%80%85%E3%83%84%E3%83%BC%E3%83%AB%E3%82%92%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%92%E3%81%A6%E3%81%84%E3%81%AA%E3%81%84%E3%81%A8%E6%9C%9F%E5%BE%85%E3%81%97%E3%81%9F%E5%8B%95)
いずれの解決方法を試みても、私の問題は解決しなかった。
Edge特有かと思い、Microsoftのdeveloper toolsのWebページも念のために確認したが、
特に有力な情報は得られず。
## 最終的な修正
下記は.jsのコード。
jqueryのために使っていたセレクタに不備があったので、それを修正すると期待通りの動作を確認できた。
```diff
- $("input[value=hoge").parent().show();
+ $("input[value=hoge]").parent().show();
```
## 知りたいこと
開発者ツールのon/offでセレクタやDOMに解釈の違いがあるのかどうか。
その他、ブラウザの仕組みや挙動について良書、良文献(ページ)があればご教授ください。
  • JavaScript

    24316 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    9510 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る