调试器不适用于chrome / safari / firefox for ember app

时间:2016-08-17 22:03:30

标签: debugging ember.js google-chrome-devtools ember-cli

我正在使用ember应用程序。该版本是" ember-cli":" 1.13.13"。

出于一个非常奇怪的原因,调试器在Chrome中不起作用。 (我也尝试过Safari和Firefox开发者版。同样的事情。)

具体来说,问题是我在一个函数中放了一个调试器语句。 Ember app加载并命中函数中的函数和调试器语句。开发人员工具中会发生什么 - > Sources选项卡是它没有向我显示调试器所在的功能。

相反,它会一直突出显示app-boot.js文件的最后一行。断点或它暂停的线路根本没有显示出来。 (见附件截图)

此外,当我使用向下箭头进入函数调用时,它仍然在<!DOCTYPE html> <html> <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <link rel="stylesheet" type="text/css" href="css/main.css"> <link rel="stylesheet" type="text/css" href="css/normalize.css"> <title>Home</title> </head> <body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainNavBar" aria-expanded="false"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="index.html" class="navbar-brand">MG</a> </div> <div class="collapse navbar-collapse" id="mainNavBar"> <ul class="nav navbar-nav"> <li class="active"><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="resume.html">Resum&eacute</a></li> </ul> </div> </div> </nav> <div class="container-fluid"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="images/code.jpg" alt="Code" class="img-responsive"> </div> <div class="item"> <img src="images/gigabyte.jpg" alt="Motherboard" class="img-responsive"> </div> <div class="item"> <img src="images/mac.jpg" alt="Mac" class="img-responsive"> </div> </div> <a href="#myCarousel" class="carousel-control left" data-slide="prev"> <span class="icon-prev"></span> </a> <a href="#myCarousel" class="carousel-control right" data-slide="next"> <span class="icon-next"></span> </a> </div> <section> <a href="www.github.com/nix12">My github repository</a> <h2>List of skills and icons</h2> <div class="column1">Column1</div> <div class="column2">Column2</div> <div class="column3">Column3</div> </section> <footer> </footer> </body> <script type="text/javascript"> $('#myCarousel').carousel(); </script> </html> ,所以我不知道它是否已进入函数。

这一直困扰着我一段时间。

enter image description here

1 个答案:

答案 0 :(得分:1)

我在OSX + Chrome上使用清空缓存和硬重新加载多次解决类似错误 - 在“源”标签中的代码更新后,我可以正确查看实际的源代码。< / p>

确保您没有应用程序的黑盒脚本。

或者您可以尝试重新安装npm软件包,bower软件包 - 在Ember CLI中创建源映射可能会出现问题。

如果没有任何帮助,请调查您的JavaScript和相关的地图文件,并检查是否可能缺少某些内容,或者地图不会更新。您可以尝试在Ember CLI中打开和关闭它们。

请参阅Ember CLI指南中的Source Maps部分,了解如何启用/禁用它们。