皮皮网

1.Android webview html5地理定位
2.你不知道的定位定位Popperjs上篇
3.生产上的问题你不会用 sourcemap 定位吗？
4.uni-app实现定位功能
5.你可能不知道的ChromeDevtools实用功能

Android webview html5地理定位

       æˆ‘查看了下源码解决了，主要代码如下：//启用数据库webSettings.setDatabaseEnabled(true);Stringdir=this.getApplicationContext().getDir("database",Context.MODE_PRIVATE).getPath();//启用地理定位webSettings.setGeolocationEnabled(true);//设置定位的数据库路径webSettings.setGeolocationDatabasePath(dir);//最重要的方法，一定要设置，这就是出不来的主要原因webSettings.setDomStorageEnabled（true）//配置权限（同样在WebChromeClient中实现）publicvoidonGeolocationPermissionsShowPrompt(Stringorigin,GeolocationPermissions.Callbackcallback){ callback.invoke(origin,true,false);super.onGeolocationPermissionsShowPrompt(origin,callback);}配置权限：<uses-permissionandroid:name="android.permission.ACCESS_FINE_LOCATION"/><uses-permissionandroid:name="android.permission.ACCESS_COARSE_LOCATION"/>

你不知道的Popperjs上篇

       ElementUI中Tooltip、Select、周边Cascader、源码源码TimePicker等组件是平台如何实现提示框定位到目标元素的？答案是借助于Popperjs，本文将深入探讨Popperjs的定位定位用法和特性。

       在ElementUI的周边弱电网站源码源码中首次了解到Popperjs，但不清楚其具体版本。源码源码通过对比ElementUI代码与Popperjs 0.5.2版本，平台发现二者高度相似，定位定位因此可以判断ElementUI使用的周边是0.5.2版本的Popperjs。接下来，源码源码我们将从0.5.2版本开始，平台学习Popperjs的定位定位使用。

       Popperjs的周边主要功能是将一个DOM元素定位到目标DOM元素附近，例如Tooltip、源码源码Popover、Popconfirm、Dropdown、Select等组件的提示框或弹窗位置。通过`getBoundingClientRect()`方法获取目标元素的位置，设置Popper元素的样式，使得其位于目标元素的右侧。

       实现定位的基本思路是获取目标元素的位置，将Popper元素设置为固定定位，吾爱源码怎么下载并根据目标元素的`right`和`top`值调整自己的位置。考虑到兼容性问题，对于IE9及以下浏览器，需要对`getBoundingClientRect()`方法进行兼容性处理。

       除了基本功能实现，Popperjs还提供了丰富的扩展使用场景，如在不同方位定位Popper元素。通过配置属性`placement`，可以指定Popper元素的定位方位，如`top-start`、`top-end`、`bottom-start`等。

       为了实现不同方位的定位，Popperjs内部定义了`baseOffsets`数组，用于存储不同方位的默认位置。在计算最终位置时，根据`placement`值和`start`、`end`属性进行定位。此外，还需要考虑`margin`值对元素大小的影响，通过`getOuterSizes()`函数计算Popper元素的实际大小。

       实现定位的代码中还包含了对`Window.getComputedStyle()`方法的使用，以获取元素的程序源码后门检测样式属性值。`_getOffsets`函数用于获取参考元素和Popper元素的位置和尺寸，计算最终的定位信息。在定位过程中，`_getOffsets`函数中使用了`shift`函数调整位置，确保`right`和`bottom`值的正确计算。

       为了提升定位性能，可以利用CSS3硬件加速。通过`transform`属性实现元素的平移，避免页面重排和重绘。同时，需要对计算值进行四舍五入处理，以避免字体模糊。考虑到浏览器兼容性问题，需要添加获取当前浏览器支持的前缀属性。

       最后，将定位功能封装在`applyStyle`函数中，提供了一套完整的定位解决方案。此外，Popperjs还支持滚动容器、保持DOM上下文、兼容性、可配置性、避免裁剪和溢出、多空源码macd快速翻转等特性。

       本文仅介绍了Popperjs的扩展使用场景和CSS3硬件加速的基本概念。下篇将深入探讨保留DOM上下文、处理滚动条、裁剪和溢出、快速翻转等场景，以及如何进行自定义扩展。敬请期待。

生产上的问题你不会用 sourcemap 定位吗？

       生产上的问题你不会用 sourcemap 定位吗？

       sourcemap 是一个以.map 为后缀的文件，它以 json 形式存储了源代码打包转换后的位置信息。它的主要作用是实现运行时代码和开发时代码都能拥有相同准确的信息提示。常见的开发时代码提示如上图所示，而运行时代码提示如上图所示，运行时代码提示的信息不够详细准确。而 sourcemap 可以在不同的处理阶段中构建出运行时代码和开发时代码的映射关系，使得运行时代码也能够提供给我们详细而准确的信息，帮助我们在生产环境中快速定位到源代码中的位置。

       要快速生成 sourcemap，前端构建工具有很多，这里列举两个常用的：vite 和 webpack。在 vite 中，只需要设置 build.sourcemap 的选项配置即可。在 webpack 中，骑砍无双源码则需要设置 devtool 的选项配置，值类型包括以下类型的组合。

       要使得sourcemap 发挥作用，除了生成对应的映射规则外，还需要一个解析工具负责将源代码和 sourcemap 规则真正进行映射。通常，浏览器、异常监控系统（如：sentry）和手动映射都可以完成此任务。浏览器通常会默认启用sourcemap 映射功能。在 Sentry 监控系统中，接入、异常捕获和添加 sourcemap 的流程如下：

       首先，在 Sentry 监控平台上注册/登录拥有自己的账号，然后可以构建一个对应的项目，项目创建好后会生成一个 dsn，在接入 Sentry 时需要传入。其次，在项目入口文件（main.js）中初始化接入 Sentry 即可。经过以上处理，Sentry 已经可以自动获取到错误信息，但没有接入 sourcemap 的错误信息在 Sentry 中也无法进行快速定位。因此，下一步就是需要给 Sentry 上传 sourcemap 相关的文件。

       在 .map 文件中有 mappings 字段，它以 Base VLQ 编码形式存储了映射到源代码行、列等信息。使用 Base VLQ 编码可以减少文件体积，因为它是一种压缩数字内容的编码方式。每个分号中的第一串英文用来表示代码的第几行、第几列的绝对位置，后面的都是相对于之前的位置做加减法。

       sourcemap 的生成、解析及应用在前端开发中是非常重要的，希望本文能帮助你更好地理解及应用 sourcemap。同时，编写文章的原则是首先保证自己有收获，其次，看看各位掘友对同一个问题都会有什么更好的方案。欢迎关注同名公众号《熊的猫》，文章会同步更新！

uni-app实现定位功能

       uni-app实现定位功能的步骤如下：

       首先，获取用户地理位置权限。使用uni-app内置的authorize方法，请求用户授权。在manifest.json文件中，点击"源码视图"，在mp-weixin配置部分添加相关配置代码。

       接下来，确保在app.json文件中也配置好权限请求。运行项目到微信开发者工具，再次配置相关代码。在authorize方法中，设置scope参数为userLocation，以请求获取位置信息。若用户拒绝授权，提示他们访问小程序设置页面。

       在实际使用前，要检查是否已获取到定位权限。如果未授权，应适时提示用户并请求授权。

       若需实现精准定位，可以借助腾讯地图。首先，注册腾讯地图开发者，获取key并下载qqmap-wx-jssdk.min.js。然后，在该文件末尾替换相关代码，并将SDK文件放入libs文件夹。创建腾讯地图对象后，调用逆地址解析方法获取位置信息。

       对于常见问题，解决方案包括：

       - 如果微信小程序定位出错，检查manifest.json的配置，确保已添加正确的权限代码，并在app.json中同步配置。然后，重新编译项目并启动，uni.getLocation方法应该能正常返回经纬度。此外，务必确认AppID已正确配置，可在manifest.json的"微信小程序配置"部分查看。

你可能不知道的ChromeDevtools实用功能

       今天来分享ChromeDevTools的个实用调试功能！

1.保留日志

       当我们刷新完页面之后，通常控制台的Console面板就会被清空。如果想保留控制台的日志，就可以在设置中勾选Preservelog选项以保留控制台中的日志。

2.代码覆盖率

       我们可以打开设置，在Experiments中勾选Recordcoveragewhileperformancetracing选项。

       在面板下方的Coverage面板中点击红色按钮以记录页面的代码覆盖率：

       代码覆盖率使用动态分析法来收集代码运行时的覆盖率，让开发者知道有代码在页面上真正的使用。动态分析是指在应用运行状态下收集代码执行数据的过程，换句话说，覆盖率数据就是在代码执行过程中通过标记收集到的。

3.显示重绘

       在浏览器的开发者工具中可以通过开启显示重绘选项以查看页面在执行操作时哪些元素会发生重绘。

       在控制台右上角三个点中的Moretools选项中开启Rendering选项卡：

       在Rendering（渲染）选项卡中开启Paintflashing：

       当刷新页面时，显示绿色的区域就是重新绘制区域。

4.检查动画

       Chrome的开发者工具不仅可以调试样式，还可以调试动画，可以在控制台右上角三个点中的Moretools选项中开启Animations选项卡：

       当页面的动画执行时，就会在时间轨道上查看所有的动画，点击其中一个动画可以懂得执行过程以及时间轴：

       我们可以在时间轴上定位到任一时刻的动画帧，也可以拖动左右两端的圆点来修改动画的延迟和周期，修改之后可以在属性面板看到对应的CSS样式。

5.截图

       Chrome浏览器内置了截图功能，可以在浏览器开发者工具中使用Ctrl+Shift+P（Windows）或者Command+Shift+P（Mac）快捷键打开搜索来查找screenshot：

       这里有四个选项：

       第一个：截取自选区域；

       第二个：截取整个网页；

       第三个：截取当前节点；

       第四个：截取当前屏幕。

       截图完成后自动下载到下载目录，打开浏览器的下载框或本机的下载目录即可看到。

6.LocalOverrides

       我们可以使用本地资源覆盖网页所使用的资源，比如可以使用本地CSS文件覆盖网页的css文件，修改样式。将本地的文件夹映射到网络，在Chrome开发者功能里面对CSS样式的修改都会直接改动本地文件，页面重新加载，使用的资源也是本地资源，达到持久化的效果。

       详见：/post/

8.事件监听器的断点

       有时应用会在用户发生交互时出现问题，这时我们就可以添加事件监听器添加断点来捕获这些事件以检查交互时的问题。可以在Source面板右侧的EventListenerBreakpoints中勾选相应的事件：

9.DOM操作的断点

       当页面的内容发生变化时，如果想要知道是哪些脚本影响了它，就可以给DOM设置断点。我们可以右键点击需要设置断点的DOM元素，在弹出的菜单中点击Breakon以选择合适的断点。

       可以看到，Breakon中有三个选项：

       SubtreeModifications：子节点（内容、属性）修改通知，常用在子节点内容发生变化后，来定位源码；

       AttributesModifications：当前节点的属性修改通知，常用在节点的className等属性被修改后，来定位源码了；

       NodeRemoval：当前节点移动时通知，常用在节点被移除时，定位源码。

.异步请求的断点

       XHRbreakpoints可以用于异步请求的断点，点击加号即可添加断点规则，输入请求的URL地址（片段），会在请求地址包含对应字符串的异步请求发出的位置自动停止：

原文：/post/