JupyterHub - 如何调试 UI 问题?
JupyterHub - how to debug UI issues?
我们使用的是jupyterhub集群,在我们这边没有任何明显的变化,notebook cells的高度变得巨大且静止(附上图片)
已尝试解决问题 - How do I increase the cell width of the Jupyter/ipython notebook in my browser?
设法减小单元格大小,但它仍然是静态的。
任何可能导致变化的建议?以及如何解决这个问题?
这就是我们细胞今天的样子 -
潜在修复
我的建议是一个接一个地卸载您的扩展,直到问题消失,老实说,这可能是获得修复的最快方法。如果有相当新的 Jupyter 版本,您可以列出所有已安装的扩展:
jupyter nbextension list
然后,您将首先卸载与笔记本主题 and/or 样式相关的任何扩展。 list
可能会遗漏一些东西(例如,扩展安装不正确,或者您自己的配置文件有问题)。下一步(在至少删除所有可疑扩展之后)将是检查 Jupyter 在后台设置的所有 user-space 数据和配置文件。您可以通过 运行:
获取包含此类文件的所有目录的路径
jupyter --paths
小提示,您可以忽略 runtime
目录中的所有文件,这些可能不是问题所在。
如果大量卸载您的扩展让您感到厌烦,另一种选择是调试实时笔记本的 CSS 并找出代码单元的样式到底在哪里被搞砸了。
调试CSS
的详细说明
以下说明适用于 Chrome,但如果您使用的是其他浏览器,您应该能够找到等效的说明:
- 启动笔记本
- 右键单击代码单元格并 select "Inspect"
- 这将调出 DOM node hierarchy 的视图,并突出显示代表您刚刚右键单击的代码单元(或至少部分代码单元)的节点
- 在屏幕右侧将是一个 window,顶部有一堆选项卡。 Select "Computed",其中包含实际显示在浏览器中的样式,根据所有 CSS select 或
的效果总和计算得出
- 尤其要注意计算样式的
width
和 height
属性。沿着 DOM 层次结构向上 and/or 走,直到找到一个看起来可疑 width
或 height
的节点
- 如果某个值显示为灰色,则表示它正在父节点中设置
- 从一个看起来可疑的值开始,然后沿着层次结构上升,直到值再次看起来正常
- 在那个过渡点的一侧,您的层次结构中的最顶层节点应该有错误的值。如果您检查 "Computed" 选项卡,您应该能够准确地看到哪些文件设置了错误的值
搞砸笔记本样式的文件的身份是这里的回报。检查这些文件应该可以帮助您发现真正的问题。
我们使用的是jupyterhub集群,在我们这边没有任何明显的变化,notebook cells的高度变得巨大且静止(附上图片)
已尝试解决问题 - How do I increase the cell width of the Jupyter/ipython notebook in my browser?
设法减小单元格大小,但它仍然是静态的。
任何可能导致变化的建议?以及如何解决这个问题?
这就是我们细胞今天的样子 -
潜在修复
我的建议是一个接一个地卸载您的扩展,直到问题消失,老实说,这可能是获得修复的最快方法。如果有相当新的 Jupyter 版本,您可以列出所有已安装的扩展:
jupyter nbextension list
然后,您将首先卸载与笔记本主题 and/or 样式相关的任何扩展。 list
可能会遗漏一些东西(例如,扩展安装不正确,或者您自己的配置文件有问题)。下一步(在至少删除所有可疑扩展之后)将是检查 Jupyter 在后台设置的所有 user-space 数据和配置文件。您可以通过 运行:
jupyter --paths
小提示,您可以忽略 runtime
目录中的所有文件,这些可能不是问题所在。
如果大量卸载您的扩展让您感到厌烦,另一种选择是调试实时笔记本的 CSS 并找出代码单元的样式到底在哪里被搞砸了。
调试CSS
的详细说明以下说明适用于 Chrome,但如果您使用的是其他浏览器,您应该能够找到等效的说明:
- 启动笔记本
- 右键单击代码单元格并 select "Inspect"
- 这将调出 DOM node hierarchy 的视图,并突出显示代表您刚刚右键单击的代码单元(或至少部分代码单元)的节点
- 在屏幕右侧将是一个 window,顶部有一堆选项卡。 Select "Computed",其中包含实际显示在浏览器中的样式,根据所有 CSS select 或 的效果总和计算得出
- 尤其要注意计算样式的
width
和height
属性。沿着 DOM 层次结构向上 and/or 走,直到找到一个看起来可疑width
或height
的节点- 如果某个值显示为灰色,则表示它正在父节点中设置
- 从一个看起来可疑的值开始,然后沿着层次结构上升,直到值再次看起来正常
- 在那个过渡点的一侧,您的层次结构中的最顶层节点应该有错误的值。如果您检查 "Computed" 选项卡,您应该能够准确地看到哪些文件设置了错误的值
搞砸笔记本样式的文件的身份是这里的回报。检查这些文件应该可以帮助您发现真正的问题。