关于 pyspider Web预览界面太小的解决方法

本人最近在学习pyspider时，遇到Web预览界面太小而无法很好的进行开发，于是在网上搜索解决方法。

准备：

css代码：

body{margin:;padding:;height:%;overflow:hidden}.warning{color:#f0ad4e}.error{color:#d9534f}#control{z-index:;min-width:760px;width:%;height:35px;position:fixed;left:;right:;background-color:#eee;box-shadow: 1px 2px #}#control div{line-height:35px;margin-left:10px;margin-right:10px}#control .webdav-btn{position:relative;float:right;padding:1px 7px ;line-height:21px;border-radius:5px;border:1px solid #428bca;background:#fff;color:#428bca;cursor:pointer;margin:6px   10px}#control .webdav-btn:hover{background:#6aa3d5;color:#fff}#control .webdav-btn.active{background:#428bca;color:#fff}#editarea{width:%;position:fixed;top:37px}#editarea,.debug-panel{left:;right:;bottom:}.debug-panel{position:absolute;top:}.resize{background-color:#;cursor:ew-resize}.resize:hover+.debug-panel{border-left:1px dashed #!important}.overlay{position:absolute;top:;bottom:;left:;right:;z-index:;background:rgba(,,,.)}.focus .CodeMirror-activeline-background{background:#e8f2ff!important}.CodeMirror-activeline-background{background:transparent!important}#task-panel{height:%;overflow-x:auto}#run-task-btn{z-index:;position:absolute;top:;right:;background:#5cb85c;border-radius:   5px;color:#fff;margin:;padding:3px 7px 5px 10px;cursor:pointer;font-weight:;line-height:15px}#run-task-btn:hover{background:#449d44}#undo-redo-btn-group{z-index:;position:absolute;top:;right:;background:#91cf91;border-radius:   5px;color:#fff;margin:;padding:3px 7px 5px 10px;cursor:pointer;font-weight:;line-height:15px;top:auto;bottom:;border-radius:5px   ;padding:5px  3px;overflow:hidden}#undo-redo-btn-group:hover{background:#6ec06e;background:#91cf91}#undo-redo-btn-group a{color:#fff;text-decoration:none;padding:5px 7px 3px 10px}#undo-redo-btn-group a:hover{background:#6ec06e}#save-task-btn{z-index:;position:absolute;top:;right:;background:#428bca;border-radius:   5px;color:#fff;margin:;padding:3px 7px 5px 10px;cursor:pointer;font-weight:;line-height:15px}#save-task-btn:hover{background:#3071a9}#task-editor{position:relative}#task-editor .CodeMirror{height:auto;padding-bottom:3px;background:#c7e6c7}#task-editor .CodeMirror-scroll{overflow-x:auto;overflow-y:hidden}#task-editor.focus .CodeMirror-activeline-background{background:#eaf6ea!important}#tab-control{list-style-type:none;position:absolute;bottom:;right:;margin:8px 20px;padding:}#tab-control li{position:relative;float:right;padding:1px 7px ;line-height:21px;margin-left:10px;border-radius:5px;border:1px solid #428bca;background:#fff;color:#428bca;cursor:pointer}#tab-control li:hover{background:#6aa3d5;color:#fff}#tab-control li.active{background:#428bca;color:#fff}#tab-control li span{position:absolute;top:-5px;right:-10px;background:#d9534f;color:#fff;font-size:%;font-weight:;padding:2px 5px ;border-radius:10px}#debug-tabs{margin-bottom:45px}#tab-web.fixed{padding-top:24px}#tab-web iframe{border-width:;width:%;height:900px !important}#tab-html{margin:;padding:7px 5px}#tab-html pre{margin:;padding:}#tab-follows .newtask{position:relative;height:30px;line-height:30px;background:#fceedb;border-bottom:1px solid #f0ad4e;border-top:1px solid #f0ad4e;margin-top:-1px;padding-left:5px;padding-right:70px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}#tab-follows .newtask:hover,#tab-follows .newtask:hover .task-more{background:#f8d9ac}#tab-follows .newtask .task-callback{color:#ec971f}#tab-follows .newtask .task-url{font-size:%;text-decoration:underline;font-weight:lighter;color:#428bca}#tab-follows .newtask .task-more{position:absolute;right:33px;top:;float:right;color:#f0ad4e;padding: 10px;background:#fceedb;border-radius:10px}#tab-follows .newtask .task-run{position:absolute;right:;top:;font-size:%;padding: 10px  30px;float:right;border-bottom:1px solid #a3d7a3;border-top:1px solid #a3d7a3;background:#80c780;color:#fff;text-shadow:  10px #fff;font-weight:}#tab-follows .newtask .task-run:hover{background:#5cb85c}#tab-follows .task-show pre{margin:5px 5px 10px}#python-editor{position:absolute;top:;width:%;bottom:}#python-editor .CodeMirror{height:%;padding-bottom:20px}#python-log{width:%;min-height:10px;max-height:%;background:rgba(,,,.);overflow:auto}#python-log #python-log-show{z-index:;width:auto;padding-top:5px;background:#d9534f;box-shadow: 2px 20px #d9534f;cursor:pointer}#python-log pre{margin:;padding:10px;color:#fff}#css-selector-helper{background-color:#eee;padding:;width:%;height:24px;text-align:right;white-space:nowrap}#css-selector-helper.fixed{position:absolute;top:}#css-selector-helper button{line-height:16px;vertical-align:2px}span.element{position:relative;height:24px;display:inline-block;padding: .2em;cursor:pointer;color:#afafaf;z-index:}span.element.invalid{display:none}span.element.selected{color:#}span.element:hover{background-color:#c8c8c8}span.element:hover>ul{display:block}span.element>ul{display:none;margin:;padding:;position:absolute;top:24px;left:;background-color:#eee;border:1px solid #;border-top-width:;color:#afafaf}span.element>ul>li{display:block;text-align:left;white-space:nowrap;padding: 4px}span.element>ul>li.selected{color:#}span.element>ul>li:hover{background-color:#c8c8c8}.copy-selector-input{height:24px;padding:;border:;margin:;padding-right:.2em;font-size:1em;text-align:right;width:%;margin-left:-100px;background:#eee}

框架请求的css静态文件目录：

参考：/home/lihuasheng/.local/lib/python3.6/site-packages/pyspider/webui/static/debug.min.css

也就是 python安装路径下寻找，本人是ubuntu系统 实在找不到python安装目录可以尝试在pycharm中随便引入一个内置文件 ctrl+鼠标左键可以进入文件然后右键点击文件后 copy path可以的到python安装的路径。

准备好以后：

web预览框过小的原因在于页面元素的css属性height被替换为60px；可以通过调试模式看到页面中有个iframe也就是web预览框。其style=60px;

于是我把其适用的css文件中 修改为了：iframe{border-width:0;width:100%;height:900px !important} 因此height=900不会被替换，因为注明了!important所以我们应该：

打开pyspider所使用的css文件 debug.min.css

gedit /home/lihuasheng/.local/lib/python3./site-packages/pyspider/webui/static/debug.min.css 

然后把上面的css代码替换即可。

最后，最重要的是pyspider有缓存机制，虽然我们替换了css文件，如果没有清空缓存的话pyspider还是使用原来的css文件。所以记得清空缓存或者换个浏览器打开。

如果你pyspider是在0.0.0.0:5000上运行的话可以换个地址。如127.0.1.1:5000

总结：找到 debug.min.css文件，替换css文件内容，清空缓存！！！

本人因为按照网上方法做了以后还没解决问题于是只能自己摸索了。。。

图片没上了。