Products
GG网络技术分享 2025-03-18 16:14 0
Chrome浏览器目前应该是绝大多数程序员最喜欢的浏览器了吧，至少我是这样的O(∩_∩)O。简洁的设计，强大的插件，完美的兼容都让我爱不释手。
Chrome还提供了一个控制台工具，在开发测试时提供了极大的便利，今天我们来看看那些非常方便的Chrome使用技巧吧。
Chrome
如果我们想看某个文件的源码，我们会进入到Source控制面板下，然后在里面慢慢找。
但是如果Source下面的文件特别多话，找到自己想要的文件是一个繁杂的过程，例如下图这么多文件，只能慢慢打开各个文件夹去找。
例图
Chrome提供了快速定位文件的快捷键cmd+P（windows上是Ctrl+P）。可以通过关键字匹配到文件名，并一键进入文件中。
快捷定位文件
当你想要在页面上直接查找某个元素时，可以直接去Elements控制面板下，按cmd+F快捷键（windows下是Ctrl+F），这样的查找同样适用于Source下的js或者css文件。
cmd+F快捷键
如果你想要查找的是特定字符串出现的所有源文件，可以使用cmd+option+F快捷键（windows下是Ctrl+Shift+F）。
下面的例子是搜索所有出现“container”的地方，js和html文件中只要匹配到都会出现在结果中。
全源文件搜索
在IDE中，例如webstorm，IntellijIDEA，快速跳到指定行的快捷键是cmd+L，弹出一个输入框输入行号后，可以直接定位到指定行。
在Chrome的Source面板下同样有这个功能，快捷键是cmd+P或者cmd+shift+p，会弹出一个输入框，然后输入框第一位输入英文冒号(:)，然后输入数字即可跳转到指定的行。
效果如下图所示。
快速跳到指定行
有的时候我们希望可以对一个文件的多个地方同时进行编辑，这需要按住command键（windows下是Ctrl键），然后点击鼠标，就可以同时多点定位，最后再输入的时候，这些地方就可以同时进行编辑。
多点编辑
在现在app开发成本比较高的情况下，有很多都采用web app的模式，可以直接在web浏览器中进行移动端的适配。
Chrome提供了强大的适配模式，主流的iphone，ipad，Galaxy等屏幕都可以直接进行模拟。
这种随时进行切换的设备模式，给前端开发人员提供了极大的便利。因此我们可以在只写一套代码的时候去同时适配web端和多个不同的移动端。
设备模式
有很多的网站在线上环境中会压缩JS和CSS文件代码，通过Source面板源文件下的{}图标可以格式化代码。
下图是格式化JS代码的方法，同样用于格式化CSS代码。
格式化代码
在页面上进行颜色设置时，Elements面板下提供了颜色预览的选择器，随着鼠标的移动，鼠标指针会变成一个放大镜，方便精确选择颜色。
颜色选择器
在页面中有一系列的hover，focus等效果，默认状态下，这些定义的CSS样式是不会直接显示在Chrome控制台下的，但是点击对应的按钮就可以查看到，并且方便进行编辑。
不同状态下样式
当我们需要对一个文件中的多个相同的字符同时进行编辑时，可以使用cmd+D快捷键(windows下是Ctrl+D)，按一次就可以匹配一次字符，然后可以同时进行编辑。
多点编辑
今天这篇文章将的Chrome控制台使用技巧，大家都可以尝试下噢，相信绝对是可以提高大家工作效率的~
JavaScript实现放大镜效果代码示例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
| <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>Document</title> <style> .smallBgImg { width: 350px; height: 350px; border: 1px solid #ccc; box-sizing: border-box; background-clip: padding-box; float: left; position: relative; cursor: pointer; } .move { border: 1px solid #ccc; box-sizing: border-box; background: rgba(165, 201, 66, 0.5); position: absolute; left: 0; top: 0; } .bigBgImg { width: 540px; height: 540px; border: 1px solid #ccc; box-sizing: border-box; background-clip: padding-box; float: left; margin-left: 10px; } .hidden { display: none; } </style> </head> <body> <div class=\"smallBgImg\"> <div class=\"move hidden\"> </div> </div> <div class=\"bigBgImg hidden\"> </div> |
| <script> (function () { //基本信息配置 var config = { smallImg: \"./image/smallImg.jpg\", //小图路径 smallDom: document.getElementsByClassName(\"smallBgImg\")[0], //小图 dom对象 bigImg: \"./image/bigImg.jpg\", //大图路径 bigDom: document.getElementsByClassName(\"bigBgImg\")[0], //大图 dom对象 moveDom: document.getElementsByClassName(\"move\")[0], //移动方块的dom对象 smallSize: { //小图尺寸 width: 350, height: 350 }, bigSize: { //大图尺寸 width: 800, height: 800 }, divBigSize: { //大图框的尺寸 width: 540, height: 540 } }; //根据比例尺计算移动框的宽高 移动框/小图尺寸 = 大框尺寸/大图尺寸 config.moveSize = { width: config.divBigSize.width * config.smallSize.width / config.bigSize.width, height: config.divBigSize.height * config.smallSize.height / config.bigSize.height }; //小图style的计算值 config.smallComputedStyle = window.getComputedStyle(config.smallDom); //大图style的计算值 config.bigComputedStyle = window.getComputedStyle(config.bigDom); //移动方块style的计算值 config.moveComputedStyle = window.getComputedStyle(config.moveDom); initSmallImg(); initBigImg(); initMoveDiv(); //初始化小图 function initSmallImg() { config.smallDom.style.background = `url(\"${config.smallImg}\") no-repeat left top/contain`; //设置背景图片 config.smallDom.onmousemove = function (e) { //鼠标移入事件 //展示移动小块 config.moveDom.style.display = \"block\"; var move = window.getComputedStyle(config.moveDom); //获取鼠标在小图中的坐标 var position = getPosition(e); //设置移动框的位置 setPosition(position); //展示大图框 config.bigDom.style.display = \"block\"; //大图框中展示部分大图 displayBigBgImgSize(); } config.smallDom.onmouseout = function () { //移动小块隐藏，大图隐藏 config.moveDom.style.display = config.bigDom.style.display = \"none\"; } } //初始化大图 function initBigImg() { config.bigDom.style.background = `url(\"${config.bigImg}\") no-repeat`; //设置背景图片 } //初始化移动框 function initMoveDiv() { config.moveDom.style.width = config.moveSize.width + \"px\"; config.moveDom.style.height = config.moveSize.height + \"px\"; } //获取鼠标的坐标位置 function getPosition(e) { if (e.target == config.smallDom) { //若鼠标出现在小图中,事件源是小图 return { //直接获取鼠标距离事件源的横坐标和纵坐标 x: e.offsetX, y: e.offsetY }; } else { //鼠标出现在移动框中,事件源是移动框 return { x: e.offsetX + parseFloat(config.moveComputedStyle.left) + 1, //鼠标距离事件源的横坐标 + 事件源在smallDom中的left值 + 边框值 y: e.offsetY + parseFloat(config.moveComputedStyle.top) + //鼠标距离事件源的纵坐标 + 事件源在smallDom中的top值 + 边框值 } } } |
| //设置移动方块的位置 function setPosition(position) { //鼠标要始终在移动方块中央位置 config.moveDom.style.left = position.x - parseFloat(config.moveComputedStyle.width) / 2 + \"px\"; config.moveDom.style.top = position.y - parseFloat(config.moveComputedStyle.height) / 2 + \"px\"; //要限制移动框的范围在小图中，否则会超出小图 var left = parseInt(config.moveComputedStyle.left); var top = parseInt(config.moveComputedStyle.top); if (left < 0) { //最左 config.moveDom.style.left = \"0px\"; } if (left > config.smallSize.width - config.moveSize.width) { //最右 config.moveDom.style.left = config.smallSize.width - config.moveSize.width + \"px\"; } if (top < 0) { //最上 config.moveDom.style.top = \"0px\"; } if (top > config.smallSize.height - config.moveSize.height) { //最下 config.moveDom.style.top = config.smallSize.height - config.moveSize.height + \"px\"; } } //展示部分大图 function displayBigBgImgSize() { //移动框的left/小图width = 大图框的left/大图width var moveLeft = parseInt(config.moveComputedStyle.left); var moveTop = parseInt(config.moveComputedStyle.top); config.bigDom.style.backgroundPosition = `-${moveLeft*config.bigSize.width/config.smallSize.width}px -${moveTop*config.bigSize.height/config.smallSize.height}px`; } }()); </script> </body> </html> index.html |
效果展示：
代码中的大图片和小图片要自己找，并且替换掉代码中的图片路径。
做放大镜效果做重要的一点是，要找到黄色移动块、小图、部分大图、大图，这四个之间的比例尺
黄色移动块 /小图 = 部分大图 / 大图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
Demand feedback
