利用 Chrome 原生功能截图网页全图

打开你想截图的网页了,然后按下 F12(macOS 是 option + command + i)调出开发者工具,接着按「Ctrl + Shift + P」(macOS 是 command + Shift + P).紧接着输入指令 capture,它会提示有三个选项,分别是截取全屏.node 模式以及当前范围,用鼠标点击或者用键盘选择对应的就可以了. 而如果你想截取手机版的网页,可以先按「Ctrl + Shift + M」(macOS 是 command + Shift + M)切换到手机模式,…

利用 Chrome 原生工具进行网页长截图

转自https://sspai.com/post/42193 要想使用截图功能,你需要首先确保 Chrome 已升级至 59 或更高版本.在想要截图的网页中,首先按下 ⌘Command + ⌥Option + I(Windows 为 F12)快捷键,召唤出调试界面. 随后,按下 ⌘Command + ⇧Shift + P(Windows 为 Ctrl + Shift + P),输入命令 Capture full size screenshot(只输前几个字母就能找到),敲下回车,Chrome 就…

Chrome 已经原生支持截图功能，还可以给节点截图！

昨天 Chrome62 稳定版释出,除了常规修复各种安全问题外,还增加很多功能上的支持,比如说今天要介绍的强大的截图功能. 直接截图打开开发者工具页面,选择左上角的元素选择按钮(Inspect) Windows 下按住 Ctrl,Mac 就按住 Command,然后在页面拖动选择区域即可. Chrome会自动使用下载方式进行存储,如下效果图,感觉还不错. 给节点截图比如说我们刚才手动截取的区域其实是一个Node节点,如果想完整截取这一部分,我们就需要使用节点截图功能. 首先在开发者工具里面选…

利用原生JS实现网页1920banner图滚动效果

内容描述:随着PC设备硬件性能的进步和分辨率的不断提高,现在主流网站逐渐开始采用1920banner图,为适应这一趋势,博主设计了1920banner图的滚动效果,代码利用了原生JS实现了1920banner图的切换效果,并针对低分辨率电脑设备进行了适配,实现了JS代码与HTML代码的完全分离,符合w3c的标准使用规范,希望能给各位开发者朋友以帮助和参考.如发现有缺陷和不足,欢迎大家予以指正,如有更好的意见或解决方法,可在评论区交流互动.一下为代码内容: <!DOCTYPE html> <…

前端性能优化之利用 Chrome Dev Tools 进行页面性能分析

背景我们经常使用 Chrome Dev Tools 来开发调试,但是很少知道怎么利用它来分析页面性能,这篇文章,我将详细说明怎样利用 Chrome Dev Tools 进行页面性能分析及性能报告数据如何解读. 分析面板介绍上图是 Chrome Dev Tools 的一个截图,其中,我认为能用于进行页面性能快速分析的主要是图中圈出来的几个模块功能,这里简单介绍一下: Network : 页面中各种资源请求的情况,这里能看到资源的名称.状态.使用的协议(http1/http2/quic...).…

修改css的（屏蔽）overflow: hidden;实现浏览器能把网页全图保存成图片

摘要: 1.项目需要,需要对网页内容“下载”保存成全图片 2.QQ浏览器等主流浏览器都支持这种下载保存功能 3.项目需要场景:编写好的项目维护文档,放在服务器上.如果是txt不能带图片可视化,如果word文档而服务器又不能打开.所以转成通俗的图片文件最适用. 4.遇到问题,因为我网站css的设置错误,没法将网页全图下载,只能下载当前屏 5.排查原因和处理:css中启用了:overflow: hidden; 这个属性,将其禁用即可原文链接: http://www.lookdaima.com/…

意想不到的chrome调试功能

没想到chrome的功能如此强大,绝非仅能使用console.log而已,碰到如此好文必定收藏,感谢大神,本文原创地址为:http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html,记在此处鞭策自己努力进取! Chrome的开发者工具已经强大到没朋友的地步了,特别是其功能丰富界面友好的console,使用得当可以有如下功效: 更高「逼格」更快「开发调试」更强「进阶级的Frontender」 Bug无处遁形「Console大…

[Tool] Chrome内的本地网页，使用XMLHttpRequest读取本地档案

[Tool] Chrome内的本地网页,使用XMLHttpRequest读取本地档案问题情景开发Cordova这类以网页内容作为UI的Hybrid APP时,开发人员可以使用IDE的功能将程序布署到手机或是仿真器来侦错.但是以笔者的经验来说,要检视HTML网页元素.观看CSS样式继承,最顺手的开发者工具还是Chrome.这时如果开发人员选择透过Chrome来模拟Hybrid APP,以档案方式加载本地网页来侦错,并且在网页里使用了XMLHttpRequest来额外加载本地档案(ex:Angu…

利用Chrome插件向指定页面植入js，劫持 XSS

资源来自:http://www.2cto.com/Article/201307/225986.html 首页 > 安全 > 网站安全 > 正文利用Chrome插件向指定页面植入js,劫持 XSS,一些猥琐的想法与实践 2013-07-08 0个评论收藏我要投稿 0x00 Chrome插件--------------------------这个想法是昨天看到@紫梦芊的帖子想起来的.想法如下:Chrome插件是可以通过manifest.json的控…

如何利用 Chrome 来模拟移动网络来调试 FastAdmin 网站

如何利用 Chrome 来模拟移动网络来高度 FastAdmin 网站因为目前大多数都在开发移动类的网页,所以客户端的速度下载速度要也考虑. 虽然都已经 4G 了,但还是要看看在网络质量很差的情况下是什么样的现象. 还好 Chrome 有提供一个测试环境. 以下图所示,可以将 Chrome 设置为一个移动设备,并将网络质量调为不同情况,用来做测试.…

利用JavaScript将页面截图生成图片传给后台的插件：html2canvas

利用JavaScript将页面截图生成图片传给后台的插件:html2canvas 一.总结一句话总结: 10 <script type="text/javascript"> 11 function takeScreenshot() { 12 html2canvas(document.getElementById('view')).then(function(canvas) { 13 document.body.appendChild(canvas); 14 }); 15…

利用wget 抓取网站网页包括css背景图片

利用wget 抓取网站网页包括css背景图片 wget是一款非常优秀的http/ftp下载工具,它功能强大,而且几乎所有的unix系统上都有.不过用它来dump比较现代的网站会有一个问题:不支持css文件,它不会自动下载.重新链接css中所指定的图片.这个问题导致的最常见的后果是dump下来的网站看不到背景图片.本文所介绍的这个脚本主要就是用来解决这个缺陷的. 这里简要介绍一下这个脚本的细节: 第3行用于设置要下载的网站的地址. 第10行用于将文件名转换为windows兼容的…

移动WebApp利用Chrome浏览器进行调试

详细的请看这个(HBuilder是我长期使用,而且值得支持的国内前端开发编辑器) http://ask.dcloud.net.cn/article/151 http://ask.dcloud.net.cn/article/69 对于上面教程要注意的问题: 1,不需要考虑run in device问题,因为他们的软件设计改变了. 2,你必须要新建一个“移动App”,我这里的是h5+. 我主要是分析我遇到的问题: 同时,我用的软件是JDK8,SDK 23的版本. 如果出现问题,你自己再重新下载SDK…

转-利用Oracle审计功能来监测试环境的变化

http://blog.csdn.net/luowangjun/article/details/5627102利用Oracle审计功能来监测试环境的变化做过测试的人都应该会碰到这样的情况:测试发现的bug在开发机器上没有出现,显然这是环境差异的原因.相当多情况下,因为测试使用的数据库结构和开发使用的数据库结构不一致造成的.尤其是一些公司在提交测试版本的时候,注重应用程序的版本提交,往往忽略提交和程序匹配的数据库结构,在这种情况下,如果程序和数据库结构不匹配的话,系统稳定就怪了,就像window…

Chrome模拟手机浏览网页

用Chrome模拟手机浏览网页,只需要编辑一个命令就可以实现 C:\Users\xxx\AppData\Local\Google\Chrome\Application\chrome.exe --user-agent="Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus One Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1"…

利用css+原生js制作简易钟表

利用css+原生js制作简单的钟表.效果如下所示实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期以及时间,至于钟表上的刻度.数字等元素,因为量比较多,采用jvascript生成 <!doctype html> <html> <head> <meta charset="UTF-8"> <link rel='stylesheet' h…

Chrome内核浏览器打开网页报错误代码： ERR_TIMED_OUT

升级win10之后如果出现chrome内核的浏览器网页总是打不开打开很慢而ie和edge是可以正常访问的用这个方法可以我弄了几天终于搞好了我直接转载过来了近期,工程师收到大量反馈360浏览器,极速模式无法打开网页,兼容模式无此问题.IE浏览器和Edge都正常.用断网急救箱.重置DNS.LSP修复后问题依然存在.下面的解决办法仅限于Win10有如上现象的情况. 解决办法一.1.删除HKEY_CURRENT_USER\Software\Microsoft\SystemCertifica…

zabbix3.2利用自动发现功能对fastcgi模式的php状态进行集中监控

zabbix3.2利用自动发现功能对fastcgi模式的php状态进行集中监控前端nginx虚拟主机引用后端多个php接口,为了方便监控,将后端服务器集中配置在nginx中,具体配置如下: [root@eus_nginx:]# cat /usr/local/nginx/config/nginx.conf user apache users; worker_processes ; worker_cpu_affinity ; error_log /data/www/logs/nginx_log/e…

通过chrome console 快速获取网页连接

通过chrome console 快速获取网页连接 var ip = document.getElementsByClassName("jDesc"); var str = ""; for(var i=0;i<ip.length;i++) { var node = ip[i]; str+="\n"+node.getElementsByTagName("a")[0].href; } console.log(str);…

利用HTML5定位功能，实现在百度地图上定位（转）

原文:利用HTML5定位功能,实现在百度地图上定位代码如下: 测试浏览器:ie11定位成功率100%,Safari定位成功率97%,(add by zhj :在手机上测试(用微信内置浏览器打开),无论使用WIFI还是移动4G联网, 定位精度都是蛮高的,误差在几十米内) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>…

配置Chrome Workspace功能

配置Chrome Workspace功能 Chrome Workspace功能是将在Chrome开发者工具(F12)中对文档的修改直接应用于对应文件中.由于Chrome并不知道当然文档对应用的文件为哪个,所以需要配置Workspace的映射关系来告诉Chrome对哪个文件做修改使用Workspace条件: Chrome V31+(正式版) 本地服务器开发 1.点击F12工具的设置按钮2.点击左侧的workspace 3.点击Add folder4.选择服务器所在的根目录,之后确定会chrome…

代理模式：利用JDK原生动态实现AOP

代理模式:利用JDK原生动态实现AOP http://www.cnblogs.com/qiuyong/p/6412870.html 1.概述含义:控制对对象的访问. 作用:详细控制某个(某类)某对象的方法,在调用之前做前置处理,调用之后做后置处理,从而实现将统一流程代码放在代理类中处理. 举例:我们在学习JDBC的时候,在批量处理的时候遇到过事务.流程:设置提交方式为手动提交-开启事务-批量处理-关闭事务-设置提交方式为默认.从这里我们清晰可以看见,每次进行批处理的时候,唯有增删改操作变化,其…

利用Chrome的Performance工具排查页面性能问题（原叫timeline）

当页面中发生卡顿,最先考虑的是swf文件造成的卡顿,经过排查发现不是swf造成的影响,利用Chrome的Performance工具发现页面中的一些元素不断在重新布局,造成潜在的性能瓶颈. 首先在Chrome中进入隐身模式,然后再在Chrome中打开开发者调试窗口,切换至Performance标签进行性能排查(它相当于一些IDE中的Profile) 当采样至一定的时间段后,点击暂停,浏览器会生成如下的图表,发现,图表最上层有大量的红点,这是Chrome给出的可能的性能瓶颈点,在它下面绿色的起伏状线…

Flask08 包含（include）、继承（extends）、宏？？？、模板中变量的来源、利用bootstrap构建自己的网页结构

1 包含直接把另一个文件的内容,复制粘贴过来 {% include "模板路径" %} 注意:模板都是放在 templates 这个文件夹下面的,可以在里面新建文件夹来进行分离: 例如:{% include "include/header.html" %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"…

利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果

利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果前言近日公司接到一个轨道系统的需求,需要将地铁线路及列车实时位置展示在大屏上.既然是大屏项目,那视觉效果当然是第一重点,咱们可以先来看看项目完成后的效果图. 可以看到中间线路里轨道的效果是非常炫酷的,那么本文的主要内容就是讲解如何在canvas上绘制出这种效果. 分析设计稿先看看设计稿中的轨道效果程序员解决问题时经常喜欢用到的方法是把一个大问题拆解为若干个小问题然后逐一处理,也就是分而治之,所以我在思考这个轨道效果的实现时,也是先…

利用Chrome开发者工具功能进行网页整页截图的方法

第一步:打开chrome开发者工具. 打开你想截图的网页,然后按下 F12(macOS 是 option + command + i)调出开发者工具,接着按「Ctrl + Shift + P」(macOS 是 command + Shift + P).紧接着输入指令 capture,它会提示有三个选项,如下图所示: 分别是截取全屏.node 模式以及当前范围,用鼠标点击或者用键盘选择对应的就可以了.…

有哪些可以将网页另存图片的chrome插件？功能类似网页截图

说实话chrome插件哪些,想找出最好最强的还真不容易,各有千秋.今天就概括性介绍下一些网页打印,图片另存为等常见需求的chrome插件.1.Awesome ScreenshotAwesome screenshot是一款针对谷歌浏览器所推出的辅助chrome浏览器插件.这款谷歌览器截图插件功能强大,是chrome用户一个非常实用的网页全屏截屏扩展软件,同时截屏之后还可以直接对图片进行一些编辑处理.2.如果用户对于截屏后的图片编辑没有太多需求,那么可以推荐Full Page Screen Capt…