JupyterHub - 如何调试 UI 问题？

Question

我们使用 jupyterhub 集群，我们这边没有任何明显的变化，笔记本单元的高度变得巨大而静止（附图）

试图解决问题，查看 - How do I increase the cell width of the Jupyter/ipython notebook in my browser?

设法减小单元格大小，但它仍然是静态的。

有什么可能导致这种变化的建议吗？以及如何解决这个问题？

这就是我们今天的细胞的样子 -

Answer 1

可能的修复

我的建议是一个接一个地卸载您的扩展程序，直到问题消失，老实说，这可能是解决问题的最快方法。如果您拥有相当新的 Jupyter 版本，您可以列出所有已安装的扩展：

jupyter nbextension list

然后，您将首先卸载与笔记本主题和/或样式相关的任何扩展程序。 list 可能会遗漏一些东西（例如安装不正确的扩展，或者您自己的配置文件有问题）。下一步（至少在删除所有可疑扩展之后）将检查 Jupyter 在后台设置的所有用户空间数据和配置文件。您可以通过运行获取包含此类文件的所有目录的路径：

jupyter --paths

小记，您可能可以忽略runtime 目录中的所有文件，这些可能不是问题。

如果大量卸载扩展程序让您感到不安，另一种选择是调试实时笔记本的 CSS，并准确找出代码单元的样式被搞砸的地方。

调试 CSS 的详细说明

以下说明适用于 Chrome，但如果您使用的是其他浏览器，您应该能够找到等效的说明：

• 启动笔记本
• 右键单击代码单元并选择“检查”
• 这将显示DOM node hierarchy 的视图并突出显示代表您刚刚右键单击的代码单元（或至少部分代码单元）的节点
• 屏幕右侧将是一个窗口，顶部有一堆选项卡。选择“Computed”，其中包含浏览器中实际显示的样式，由所有 CSS 选择器的效果之和计算得出
• 特别要注意计算样式的width 和height 属性。向上和/或向下遍历 DOM 层次结构，直到找到具有可疑外观的节点 width 或 height
  • 如果某个值显示为灰色，则表示它正在父节点中设置
• 从一个可疑的值开始，然后在层次结构中向上直到值再次看起来正常
• 在该转换点的一侧，您的层次结构中的最顶层节点应该具有错误值。如果您检查“计算”选项卡，您应该能够准确地看到哪些文件设置了错误的值

搞砸笔记本样式的文件的身份是这里的回报。检查这些文件应该有助于您发现真正的问题。