有没有办法在famo.us应用程序中调试渲染问题？

Question

使用famo.us时，有没有办法打开调试或某些命令向我们展示渲染问题？

日志语句会有所帮助，也可能以其他任何方式告诉我们呈现应用程序时的情况。

编辑：这是我到目前为止看到的渲染问题

1- 各种浏览器的布局不一致（甚至还没有谈论IE！）。

Safari 7.02：

Chrome35：

Android Firefox 29：

2- 使用famo.us滚动基本上是搞砸了。

我的应用程序（网站）有3个主要部分：

• 标题（具有4个曲面的ScrollContainer）。
• 页脚（这是一个带有1个表面的ScrollContainer）。
• 内容（左侧有2个ScrollContainers，右侧有Deck组件内的2个ScrollContainers。每个文本/段落都是其各自ScrollContainer中的表面）。

现在，如果你go to my app，你会注意到滚动被搞砸了，我不明白为什么！我甚至不知道如何调试这个烂摊子。

P.S：代码保持不变，并且有意见。

但等等还有更多。滚动让用户感到困惑，因为用户不知道此视图是否可滚动，因为没有滚动条可见。 You can even see that on the famo.us demo page。去尝试滚动:)。您可以滚动的唯一方法是，如果您转到页面的左侧...

3- Deck组件似乎根据浏览器在初始加载时随机排列卡片！好像事情还没有充分搞砸。见下面的截图：

Chrome35 Desktop首先呈现绿卡：

FF29桌面首先呈现红色卡：

有上述所有问题。我不知道如何修复它们或为什么它们正在发生。 将有助于我作为开发人员调试famo.us的问题的列表：

1. 使用组件时启用一些调试日志记录。
2. 错误地使用组件时抛出JS错误。
3. 如果使用已知问题的组件，请向我发出潜在的布局问题。
4. 有更好的文档。我基本上阅读了你的代码库，以了解如何使用某些东西，因为famo.us文档没有增加很多价值而没有示例，而你的开源代码却没有。
5. 更多关于布局和页面结构的文章。这是一个基本的问题。如果我们无法做到这一点，那么在没有正确查看的页面上播放动画是没有意义的！

我还注意到桌面上的FF29在我与卡片组交互时滞后，而在Chrome上它并没有。因此，跨设备备份60fps索赔将是一个良好的开端。向我们展示绩效指标和比较，以证明这一说法。

我真的想使用famo.us，如果我得到一些时间，我希望能提供一些修复，但this is currently how I feel about famo.us。

Answer 1

是的，如果有更多信息，会很棒。像一个着名的提示或什么。我使用jshint至少可以解决常见的JavaScript错误。

此外，这也为我节省了几次。 http://famo.us/guides/pitfalls

但我同意这是一个小小的错误，我一直在使用Scrollview。

Answer 2

目前在Famo.us中没有特定于渲染的调试工具..

当我遇到问题时，我会做一些事情。

1）使用javascripts＆＃39; debugger＆＃39;命令停止执行代码并检查环境..

debugger;

2）使用可以在要检查的曲面中轻松搜索的类。该类不包含任何样式，但足够独特，可用作标识符，以便在DOM树中快速查找元素。

var suspiciousSurface = new Surface({
    size:[200,200],
    classes: ['my-debug-class']
});

希望这有帮助！

Answer 3

一个famo.us应用程序基本上是一个javascript应用程序，所以相同的技术适用http://berzniz.com/post/78260747646/5-javascript-debugging-tips-youll-start-using-today

关于渲染，可以检查DOM。如果您的场景不是太复杂，您可以快速找出曲面映射到哪个DIV。

你也可以像@johntraver建议的那样勾勒出一个特定的表面，或者也勾勒出所有的表面：在你的CSS中，添加：

.famous-surface {
  border: solid black 1px;
}