解决pyspider框架web预览框过小问题

Chrome 使用pyspider框架时,web预览框只有一小条:

解决办法:

找到debug.min.css文件,替换为如下内容:

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

在web ui中打开一个项目调试,点到WEB页面,按Ctrl+F5 刷新测试,网页预览框已恢复正常。

亲测可用:

解决pyspider框架web预览框过小问题的更多相关文章

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

    本人最近在学习pyspider时,遇到Web预览界面太小而无法很好的进行开发,于是在网上搜索解决方法. 准备: css代码: body{margin:;padding:;height:%;overfl ...

  2. Atitit.web预览播放视频的总结

    Atitit.web预览播放视频的总结 1. 浏览器类型的兼容性(chrome,ff,ie) 1 2. 操作系统的兼容性 1 3. 视频格式的内部视频格式跟播放器插件的兼容性.. 2 4. 指定播放器 ...

  3. jquery解决file上传图片+图片预览

    js解决file上传图片+图片预览 demo案例中代码为js原生控制,可以根据项目的需求修改为jquery操作 <!DOCTYPE html><html lang="en& ...

  4. Qt之股票组件-股票检索--支持预览框、鼠标、键盘操作

    目录 一.感慨一下 二.效果展示 三.搜索编辑框 1.编辑框 2.预览框 四.相关文章 原文链接:Qt之股票组件-股票检索--支持预览框.鼠标.键盘操作 一.感慨一下 之前做过一款炒股软件,个人觉着是 ...

  5. 解决officeOnline文档预览服务器只能域名提交的限制Redirect

    此项目是解决officeOnline文档预览只能用域名提交的限制 http://officeOnline文档预览域名或IP/op/generate.aspx // 微软原生页面 创建链接后会生成全屏预 ...

  6. 问题记录,如何解决confluence的office预览的时候的乱码问题

    在新的服务器(ubuntu16.04)上安装confluence,预览office的附件的时候,发现中文无法正确显示 在网上搜了一下,搜到一篇官方的文档,是关于这个问题的 问题原因: 在服务器上没有安 ...

  7. 解决Axure发布分享预览的3个方法

    公司的同事制作的一个产品原型,要发给我,我当时正在客户这里,电脑上并没有Axure,客户又催得急,感到一阵无奈.这次回来之后,经过一番摸索,发现还是有办法的.这里给大家分享一下Axure发布分享预览的 ...

  8. Jekyll 解决Jekyll server本地预览文章not found的问题

    layout: post tags: [Jekyll] comments: true 执行Jekyll本地浏览器预览指令 bundle exec jekyll serve 进入浏览器输入127.0.0 ...

  9. 解决在IE里预览时弹出:为了有利于保护安全性......

    用Dreamweaver做网页,在IE里预览时弹出这个:为了有利于保护安全性,Internet Explorer 已限制此网页运行可以访问计算机的脚本或ActiveX控件. 在页面顶部加段代码就可以了 ...

随机推荐

  1. Generating a Random Sample from discrete probability distribution

    If is a discrete random variable taking on values , then we can write . Implementation of this formu ...

  2. URL的作用是什么?它由几部分组成?

    URL是统一资源定位符,对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址.互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它 ...

  3. QML学习(四)——<Text显示>

    文本显示是界面开发必不可少的内容,在Qt Quick模块中提供了 Text 项目来进行文本的显示,其中可以使用 font 属性组对文本字体进行设置.这一篇我们来看看它们的具体使用. 使用字体 就像前面 ...

  4. linux 命令 文件数量统计

    # 查看当前目录下的文件数量(不包含子目录中的文件) ls -l|grep "^-"| wc -l # 查看当前目录下的文件数量(包含子目录中的文件) 注意:R,代表子目录 ls ...

  5. Wordpress 获取 custom post type 的当前文章 分类信息

    // knowledgebase_category 为 custom post type taxonomy $terms = get_the_terms( get_the_ID() , 'knowle ...

  6. vue---定义全局变量或函数

    开发项目的时候,有很多的东西需要重复使用,例如函数或者变量等,例如网站服务器地址,token等,这时候就需要设置一波全局变量和全局函数 定义全局函数 原理 新建一个模块文件,然后在main.js里面通 ...

  7. LIST<>泛型集合取得对象的属性值

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  8. TP-Link無線路由器(分享器)頻寬控管

    需求: 對十個終端進行頻寬的控管(有線連接),也需要無線的連線 設備: 兩台TP-Link AC750(每台四個LAN端口),一台TP-Link hub 由於資金有限,兩個路由器最多也只有8個接口,如 ...

  9. [LeetCode] 354. Russian Doll Envelopes 俄罗斯套娃信封

    You have a number of envelopes with widths and heights given as a pair of integers (w, h). One envel ...

  10. LeetCode:接雨水【42】

    LeetCode:接雨水[42] 题目描述 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图,计算按此排列的柱子,下雨之后能接多少雨水. 上面是由数组 [0,1,0,2,1,0,1,3,2,1, ...