chrome Notes

==========
debugging on Android phone
open developer tools console in Chrome on Android phone


chrome extensions
panda
mercury reader
full page screen capture
auto text expander
grammarly


Gmail Notifications On A Desktop
Show Gmail Notifications On A Desktop




Disable the Google Chrome Software Reporter Tool using file permissions

%localappdata%\  = C:\Users\User\AppData\Local\

Go to %localappdata%\google\chrome\User Data\SwReporter\39.195.200.3\
Right-click software_reporter_tool.exe and select Properties

select Deny in the permissions list for all users.
This will make sure the tool is not allowed to run automatically.


Chrome Keyboard Shortcuts


Goal
Shortcut
Open a new tab
Ctrl + T
Close the current tab
Ctrl + W
Reopen last tab closed
Ctrl + Shift + T
View next tab
Ctrl + Alt + the right arrow key
View previous tab
Ctrl + Alt + the left arrow key
Jump to a specific tab
Ctrl and select the appropriate number
Open a hyperlink in a new tab
Ctrl and click the link
When the user presses CTRL, the page will be loaded in a new tab
Open a link in a new window
Hold Shift and click the link
When the user presses SHIFT, the page will be loaded in a new window.

Put a cursor in the search bar
Ctrl + L
Erase the current search
Ctrl + delete
Highlight the next word in search
Shift + Alt + the right arrow key
Highlight the last word in a search
Shift + Alt + the left arrow key
Go back to the previous page
Press delete
Go forward to the next page
Hold Shift + delete
Reload the current page
Ctrl + R
Open the find bar
Ctrl + F
Scroll to the next keywords in find bar
Press Enter
Scroll to previous keywords in the find bar
Hold Shift + Enter
Save the current page as a bookmark
Ctrl + D
Open the settings page
Ctrl + the Comma key
Open the downloads page
Ctrl + Shift + J
Open a new window
Ctrl + N
Drag a tab out of your window
Click the tab and drag it downwards
Close the current window
Ctrl + Shift + W
Minimize the current window
Ctrl + M
Maximize the current window
Hold Control and Command + F
Scroll down the web page
Tap the Space Bar
Quit Google Chrome
Ctrl + Q
Jump to the last tab
Ctrl + the number nine
Hide Google Chrome
Ctrl + H
Log in as a different user
Ctrl + Shift and N
Clear browsing data
Ctrl + Shift and Delete
Search for selected text
Ctrl + E



Software Reporter Tool
https://www.ghacks.net/2018/01/20/how-to-block-the-chrome-software-reporter-tool-software_reporter_tool-exe/

path
C:\Users\USERNAME\AppData\Local\Google\Chrome\User Data\SwReporter\VERSION\software_reporter_tool.exe


提高工作效率的 Chrome 插件
开发相关拓展插件
1. WEB前端助手（FeHelper)
FeHelper简直就是前端开发人员的神器，它是由国人开发的一款前端工具集合的小插件，插件功能齐全，基本上涵盖了前端从业者经常会使用到的基础功能，使用起来也很顺手。
下面就来感受一下强大的功能：

FE支持按需安装，也就是说，上面的这些功能， 你需要什用到什么再安装就行， 下面就挑两个我工作中使用到的：
json 格式化



页面取色我们在开发时需要对一些内容进行取色， 很多小伙伴都是打开chrome调试器再使用取色器进行取色。
使用FeHelper的取色器更加方便



JS正则表达式验证不仅可以生成常用的正则表达式, 也可可以校验表达式是否匹配, 在正则调试过程中可以起到较好地辅助作用



一些前端开发常用的功能都有，方便实用；还有其他好用的功能，你们慢慢去发现吧，这里就不赘述
2. vue-devtools
vue-devtools是一款基于chrome游览器的插件，用于调试vue应用,被称为“Vue 调试神奇” vue是数据驱动的, 利用这个插件，这样就能看到vue中每个组件的data、props、computed等多种属性和方法，为我们项目的开发与调试提供了很多的便利 。




3. React Developer Tools
如果你使用React进行开发，那必不可少的就是React Developer Tools, 它是Fecebook出品的，同样使用 React Developer Tools 进行调试时，可以查看应用程序的 React 组件分层结构，而不是更加神秘的浏览器 DOM 表示



4. Postman
Postman 插件可以复用浏览器的Cookie，更加方便测试。
不论你是做后端开发还是客户端开发，Postman都是测试HTTP接口的必备利器，支持集成测试；还可以将测试请求分组，然后批量执行。




5. Octotree
在GitHub边侧栏上显示代码树。
非常适合查看项目源代码，无需将代码库clone到编辑器就可以如同在编辑器中操作一样， 可以直接搜索文件跳转。




6. Lighthouse 前端性能优化测试工具
在前端开发中，对于自己开发的app或者web page性能的好坏，一直是让前端开发很在意的话题。
我们需要专业的网站测试工具，让我们知道自己的网页还有哪些需要更为优化的方面，我是使用过的一款工具：Lighthouse ，感觉还不错，记录下来，也顺便分享给用得着的伙伴。




lighthouse 插件会对网页的各个测试项的结果打分，并给出优化建议报告，是一个非常实用的可视化网站优化工具。

7. Clear Cache
clear cache通过单击一个按钮清除缓存和浏览数据。
使用此扩展快速清除缓存，无需任何确认对话框，弹出窗口或其他烦恼。
点击图标即可清除缓存、cookie等，开发必备！ 可以根据需要清除的数据定制ClearCache，这些数据包括应用缓存，Cookie，下载，文件系统，表单数据，历史记录，索引数据库，本地存储，插件数据，密码和WebSQL等。




8. Vimium
Vimium 则继承了 Vim 中的常用键位，让你在使用 Chrome 的过程中，无论是浏览网页、切换标签或是其它任何操作，全都可以只通过键盘完成。
想像一下，你再也不需要移动鼠标去打开一个链接，手指不用离开键盘，一切都是这么流畅。




9. Save All Resources
当我们在网页上看到炫酷的动画效果，一个很自然的想法就是F12， 然后下载资源，但是在chrome开发者工具中Source是找到当前页面所使用的资源，而我们希望可以直接一键下载所有网页资源，并且可以保持目录结构。

一键下载网页资源(Save All Resources)，可以完美的满足我们的需求


10. Wappalyzer
展示你访问的网页由什么技术栈所构建，准确率还是不错的，方便分析其他网站



日常高频使用（非开发类）
1. 谷歌上网助手_GHelper
很多时候用户想浏览一些国外的网站查阅一些资料,但是国内的网络环境难以通过, 所以我们给大家介绍过各种上网助手、访问助手等。
今天给大家带来的是谷歌上网助手的另一个版本——开发版（Ghelper）。
免费使用，它拥有十二万的高用户数，简洁明了，上手方便！



2. SimilarWeb
对于网站开发者来说，除了网站本身的代码设计与开发，网站的各种用户访问数据与流量分析也是很重要的一块工作。
SimilarWeb 这款 Chrome 插件能够帮你统计网站的流量来源与排名，查询网站参与等各种网站信息。




3. Advertising Terminator
广告终结者（Advertising Terminator）是你唯一需要的必备广告过滤扩展。
广告终结者可以清除几乎所有的网络广告样式，包括购物广告、浮动广告、视频广告、恶意弹窗、网络跟踪等...



4. Infinity 新标签页
最后要给大家安利的就是Infinity，功能强大的新建标签页扩展！做的界面很美，每日壁纸质量也很高！有同步笔记、代办事项等，同时，喜欢它的网页图标，提供了很多常用网站的图标，自定义书签时很好看~唯一的缺点，就是感觉启动比较慢~



5. 新媒体管家——帐号管理&图文编辑
顾名思义，新媒体管家的主要功能是管理你的新媒体帐号，目前支持以下平台：



可以让你同时管理几个平台的帐号，或一个平台上的多个帐号。
添加帐号之后，就可以通过新媒体管家进入相应的帐号了。
比如，对于微信公众平台来说，你可以添加多个帐号，并且同时登陆，一天之内只需要扫码登录一次，便可以直接进入后台。

新媒体管家还有一个非常有用的功能就是采集素材， 当你看到心仪的素材，点击一下采集，就可以存入自己采集的素材库，随时想用都可以。

6. Extension Manager 扩展管理器
给大家安利了这么多插件， 为了方便管理和使用最后再推荐一个Extension Manager, 你可以用它来对你安装的插件进行分组管理；还可以快速的切换插件的开启与关闭，你可以配置排序规则， 根据你的使用评率来排序这些插件。



获取及安装
文中提到的插件，我都已经为大家下载好了，给本公众号发送关键字：插件，就可以领取全部已下载好的安装包。

正常安装
首先在标签页输入【chrome://extensions/】进入chrome扩展程序解压你在本站下载的插件，并拖入扩展程序页即可。

安装出现程序包无效CRX-HEADER-INVALID的解决方案, 参照：Chrome插件安装时出现"CRX-HEADER-INVALID"解决方法。
安装好后即可使用。

推荐大家使用chrome应用商店进行安装，因为文中已经推荐了谷歌上网助手

cloud.google
console.cloud.google.com
https://www.youtube.com/watch?v=vIJdypOqlL4
Hosting a Website on Google Cloud Platform

https://www.youtube.com/watch?v=2UDD-9cPXA8
host Wordpress website on Google Cloud

StartPage
Project name
api-project-751987746073
Project ID
751987746073
Project number:

Chrome DevTools
命令（Command） 菜单 🏈
“命令”菜单是最最常用的，本文也会多次用到，所以这里先说一下打开方式:
按Cmd + Shift + P（如果使用Windows，则按Ctrl + Shift + P）打开“命令”菜单。


截图DOM元素 🏉
当你只想对一个特别的 DOM 节点进行截图时，你可能需要使用其他工具弄半天，但现在你直接选中那个节点，打开 命令（Command） 菜单并且使用 节点截图 就可以了。

截取特定节点对应上图命令是Screenshot Capture node screenshot。
截取特定DOM元素示例：


不只是这样，你同样可以用这种方式 实现全屏截图 ：通过 Screenshot Capture full size screenshot 命令。
❝请注意，这里说的是全屏，并不只是页面可视区域，而是包含滚动条在内的所有页面内容。❞
对应截取全屏示例：


在控制台中使用上次操作的值 🎃
我是最近才发现这个技巧。使用$_可以引用在控制台执行的前一步操作的返回值。如果您正在控制台调试一些JavaScript代码，并且需要引用先前的返回值，那么这可能非常方便。

重新发起xhr请求 🚀
在平时和后端联调时，我们用的最多的可能就是Network面板了。但是每次想重新查看一个请求，我们往往都是通过刷新页面、点击按钮等方式去触发xhr请求，这种方式有时显得会比较麻烦，我们可以通过google提供的Replay XHR的方式去发起一条新的请求，这样对于我们开发效率的提升是有所帮助的。


编辑页面上的任何文本 ✍
在控制台输入document.body.contentEditable="true"或者document.designMode = 'on'就可以实现对网页的编辑了。
其实这个还是比较实用的，比如你要测试一个DOM节点文字太长时，样式是否会混乱，或者要去直接修改页面元素去满足一些业务需求时。（我之前是在Elements面板一个一个去修改的，，，）

网络面板（Network）的幻灯片模式 🌇
启动Network 面板下的Capture screenshots就可以在页面加载时捕捉屏幕截图。有点幻灯片的感觉。

单击每一帧截图，显示的就是对应时刻发生的网络请求。这种可视化的展现形式会让你更加清楚每一时刻发生的网络请求情况。

动画检查 🎏
DevTools 中有一个动画面板，默认情况下它是关闭的，很多人可能不太清楚这个功能。它可以让你控制和操纵 CSS 动画，并且可视化这些动画是如何工作的。
要打开该面板，可以在 DevTools 右上角菜单 → More tools 中打开 Animations ：


默认情况下，DevTools 会“监听”动画。一旦触发，它们将被添加到列表中。你能看到这些动画块如何显示。在动画本身上，DevTools 会向我们展示哪些属性正在更改，例如 background-color 或 transform。
然后，我们可以通过使用鼠标拖动或调整时间轴来修改该动画。

递增/递减 CSS 属性值 🃏
作为前端开发，平时少不了通过Elements面板去查找元素以及它的css样式。有时调整像素px会比较麻烦一点，这时就可以使用快捷键去帮你完成：
* 增量0.1  * Mac：Option +向上和Option +向下  * Windows：Alt +向上和Alt +向下* 增量1  * Mac：向上+向下  * Windows：向上+向下* 增量10  * Mac：⇧+向上和⇧+向下  * Windows：⇧+向上和⇧+向下* 递增100  * Mac：⌘+向上和⌘+向下  * Windows：Ctrl +向上和Ctrl +向下

在低端设备和弱网情况下进行测试 📱
我们平时开发一般都是在办公室（wifi 网速加快），而且设备一般都是市面上较新的。但是产品的研发和推广，一定要考虑低设备人群和弱网的情况。
在Chrome DevTools中可以轻松调节CPU功能和网络速度。这样，我们就可以测试 Web 应用程序性能并进行相应优化。
具体打开方式是：在Chrome DevTools中通过CMD/Ctrl + Shift + p打开命令菜单。然后输入Show Performance打开性能面板。

copying & saving 📜
在调试的过程中，我们总会有对 Dev Tools 里面的数据进行 复制 或者 保存 的操作，其实他们也是有一些小技巧的！
copy()
可以通过全局的方法 copy() 在 console 里 copy 任何你能拿到的资源



Store as global variable
如果在console中打印了一堆数据，想对这堆数据做额外的操作，可以将它存储为一个全局变量。只需要右击它，并选择 “Store as global variable”选项。第一次使用的话，它会创建一个名为 temp1 的变量，第二次创建 temp2，第三次 ... 。通过使用这些变量来操作对应的数据，不用再担心影响到他们原来的值。

自定义 devtools 🌈


大家平时用的最多的Chrome 主题可能就是白色/黑色这两种了，但用的久了，难免想尝试像IDE一样切换主题。
打开方式
首先需要启用实验模式中的Allow custom UI themes地址栏输入如下urlchrome://flags/#enable-devtools-experiments # 启用实验功能

启用实验功能，并重启浏览器

控制台中使用快捷键F1打开设置，切换到Experiments 选项启用Allow custom UI themes

从Chrome商店安装Material DevTools Theme Collection扩展程序

选择你喜欢的主题即可


CSS/JS 覆盖率 ✅
Chrome DevTools 中的Coverage功能可以帮助我们查看代码的覆盖率。
打开方式
打开调试面板，用快捷键 shift+command+P （mac）输入 Show Coverage调出相应面板

点击reload 按钮开始检测

点击相应文件即可查看具体的覆盖情况（绿色的为用到的代码，红色表示没有用到的代码）


自定义代码片段 Snippets 🌰
在平常开发过程中，我们经常有些 JavaScript 的代码想在 Chrome Devtools中调试，直接在 console 下 写比较麻烦，或者我们经常有些代码片段(防抖、节流、获取地址栏参数等)想保存起来，每次打开 Devtools 都能获取到这些代码片段，而不用再去google，正好Chrome Devtool 就提供了这种功能。
如图所示，在 Sources 这个tab栏下，有个 Snippets 标签，在里面可以添加一些常用的代码片段。


将图片复制为数据 URI 🦊
打开方式
选择Network面板在资源面板中选择Img右键单击将其复制为数据URI（已编码为base 64）
媒体查询 🔭
媒体查询是自适应网页设计的基本部分。在Chrome Devtools中的设备模式下，在三圆点菜单中点击 Show Media queries即可启用：

Devtools会在样式表中检测媒体查询，并在顶端标尺中将它们显示为彩色条形:

那怎么使用呢？其实也很简单：
点击媒体查询条形，调整视口大小和预览适合目标屏幕大小的样式右键点击某个条形，查看媒体查询在 CSS 中何处定义并跳到源代码中的定义

keys/values 🎯
这个是Devtools提供的快速查看一个对象的key、values的API。用起来也很简单：


❝你可能会说Object.keys()和Object.values()也可以实现啊，但这个不是更简单点吗 🤠
❞
table 🦐
Devtools提供的用于将对象数组记录为表格的API:



Chrome DevTools Keyboard Shortcuts
You can also find shortcuts in tooltips. 
Hover over a UI element of DevTools to display its tooltip. 
If the element has a shortcut, the tooltip includes it.

Keyboard shortcuts for opening DevTools
To open DevTools, press the following keyboard shortcuts while your cursor is focused on the browser viewport:

  

      
Action
      
Windows / Linux
  
  

    

      
Open whatever panel you used last
      
F12 or Control+Shift+I
    
    

      
Open the Console panel
      
Control+Shift+J
    
    

      
Open the Elements panel
      
Control+Shift+C
    
  


Global keyboard shortcuts
The following keyboard shortcuts are available in most, if not all, DevTools panels.


  

      
Action
      
Mac
      
Windows / Linux
  
  

    

      
Show Settings
      
? or Function+F1
      
? or F1
    
    

      
Focus the next panel
      
Control+]
    
    

      
Focus the previous panel
      
Control+[
    
    

      
      

        Switch back to whatever docking position you last used.
        If DevTools has been in its default position for the entire session, then this shortcut undocks DevTools into a separate window
      
      
Control+Shift+D
    
    

      
Toggle Device Mode
      
Control+Shift+M
    
    

      
      
Toggle Inspect Element Mode
      
Control+Shift+C
    
    

      
Open the Command Menu
      
Control+Shift+P
    
    

      
Toggle the Drawer
      
Escape
      
Escape
    
    

      
Normal reload
      
F5 or Control+R
    
    

      
Hard reload
      
Control+F5 or Control+Shift+R
    
    

      

        Search for text within the current panel. 
Not supported in the Audits, Application, and Security panels
      
      
Control+F
    
    

      
Opens the Search tab in the Drawer, which lets you search for text across all loaded resources
      
Control+Shift+F
    
    

      
Open a file in the Sources panel
      
Control+O or Control+P
    
    

      
Zoom in
      
Control+Shift++
    
    

      
Zoom out
      
Control+-
    
    

      
Restore default zoom level
      
Control+0
    
    

      
Run snippet
      
Press Control+O to open the Command Menu, type ! followed by the name of the script, then press Enter
    
  


Elements panel keyboard shortcuts

  

      
Action
      
Mac
      
Windows / Linux
  
  

    

      
Undo change
      
Control+Z
    
    

      
Redo change
      
Control+Y
    
    

      
Select the element above / below the currently-selected element
      
Up Arrow / Down Arrow
      
Up Arrow / Down Arrow
    
    

      
Expand the currently-selected node. 
If the node is already expanded, this shortcut selects the element below it
      
Right Arrow
      
Right Arrow
    
    

      
Collapse the currently-selected node. 
If the node is already collapsed, this shortcut selects the element above it
      
Left Arrow
      
Left Arrow
    
    

      
Expand or collapse the currently-selected node and all of its children
      
Hold Option then click the arrow icon next to the element's name
      
Hold Control+Alt then click the arrow icon next to the element's name
    
    

      
Toggle Edit Attributes mode on the currently-selected element
      
Enter
      
Enter
    
    

      
Select the next / previous attribute after entering Edit Attributes mode
      
Tab / Shift+Tab
      
Tab / Shift+Tab
    
    

      
Hide the currently-selected element
      
H
      
H
    
    

      
Toggle Edit as HTML mode on the currently-selected element
      
Function+F2
      
F2
    
  


Styles pane keyboard shortcuts


  

      
Action
      
Mac
      
Windows / Linux
  
  

    

      
Go to the line where a property value is declared
      
Hold Control then click the property value
    
    

      
Cycle through the RBGA, HSLA, and Hex representations of a color value
      
Hold Shift then click the Color Preview box next to the value
      
Hold Shift then click the Color Preview box next to the value
    
    

      
Select the next / previous property or value
      
Click a property name or value then press Tab / Shift+Tab
      
Click a property name or value then press Tab / Shift+Tab
    
    

      
Increment / decrement a property value by 0.1
      
Click a value then press Option+Up Arrow / Option+Down Arrow
      
Click a value then press Alt+Up Arrow / Alt+Down Arrow
    
    

      
Increment / decrement a property value by 1
      
Click a value then press Up Arrow / Down Arrow
      
Click a value then press Up Arrow / Down Arrow
    
    

      
Increment / decrement a property value by 10
      
Click a value then press Shift+Up Arrow / Shift+Down Arrow
      
Click a value then press Shift+Up Arrow / Shift+Down Arrow
    
    

      
Increment / decrement a property value by 100
      
Click a value then press Control+Up Arrow / Control+Down Arrow
    
  


Sources panel keyboard shortcuts

  

      
Action
      
Mac
      
Windows / Linux
  
  

    

      
Pause script execution (if currently running) or resume (if currently paused)
      
F8 or Control+\
    
    

      
Step over next function call
      
F10 or Control+'
    
    

      
Step into next function call
      
F11 or Control+;
    
    

      
Step out of current function
      
Shift+F11 or Control+Shift+;
    
    

      
Continue to a certain line of code while paused
      
Hold Control and then click the line of code
    
    

      
      
Select the call frame below / above the currently-selected frame
      
Control+. / Control+,
      
Control+. / Control+,
    
    

      
Save changes to local modifications
      
Control+S
    
    

      
Save all changes
      
Control+Alt+S
    
    

      
Go to line
      
Control+G
      
Control+G
    
    

      
Jump to a line number of the currently-open file
      
Press Control+O to open the Command Menu, type : followed the line number, then press Enter
    
    

      
Jump to a column of the currently-open file (for example line 5, column 9)
      
Press Control+O to open the Command Menu, type :, then the line number, then another :, then the column number, then press Enter
    
    

      
Go to a function declaration (if currently-open file is HTML or a script), or a rule set (if currently-open file is a stylesheet)
      
Press Control+Shift+O, then type in the name of the declaration / rule set, or select it from the list of options
    
    

      
Close the active tab
      
Option+W
      
Alt+W
    
  


Code Editor keyboard shortcuts


  

      
Action
      
Mac
      
Windows / Linux
  
  

    

      
Delete all characters in the last word, up to the cursor
      
Option+Delete
      
Control+Delete
    
    

      
Add or remove a line-of-code breakpoint
      
Focus your cursor on the line and then press Control+B
    
    

      
Go to matching bracket
      
Control+M
      
Control+M
    
    

      
Toggle single-line comment. 
If multiple lines are selected, DevTools adds a comment to the start of each line
      
Control+/
    
    

      
Select / de-select the next occurrence of whatever word the cursor is on. 
Each occurrence is highlighted simultaneously
      
Control+D / Control+U
    
  


Performance panel keyboard shortcuts

  

      
Action
      
Mac
      
Windows / Linux
  
  

    

      
Start / stop recording
      
Control+E
    
    

      
Save recording
      
Control+S
    
    

      
Load recording
      
Control+O
    
  


Memory panel keyboard shortcuts

  

      
Action
      
Mac
      
Windows / Linux
  
  

    

      
Start / stop recording
      
Control+E
    
  


Console panel keyboard shortcuts

  

      
Action
      
Mac
      
Windows / Linux
  
  

    

      
Accept autocomplete suggestion
      
Right Arrow or Tab
      
Right Arrow or Tab
    
    

      
Reject autocomplete suggestion
      
Escape
      
Escape
    
    

      
Get previous statement
      
Up Arrow
      
Up Arrow
    
    

      
Get next statement
      
Down Arrow
      
Down Arrow
    
    

      
Focus the Console
      
Control+`
      
Control+`
    
    

      
Clear the Console
      
Control+L
    
    

      
Force a multi-line entry. 
Note that DevTools should detect multi-line scenarios by default, so this shortcut is now usually unnecessary
      
Shift+Enter
    
    

      
Execute
      
Return
      
Enter
    
    

      
Expand all sub-properties of an object that's been logged to the Console
      

        Hold Alt then click Expand
        
      
      

        Hold Alt then click Expand
        
      
    
  


Chrome DevTools Guide

Application panel Debug Progressive Web Apps
https://developers.google.com/web/tools/chrome-devtools/progressive-web-apps
Use the Application panel to inspect, modify, and debug web app manifests, service workers, and service worker caches.

Related Guides: 
 
Progressive Web Apps
 
 
This guide only discusses the Progressive Web App features of the Application panel. 
If you're looking for help on the other panes, check out the last section of this guide, Other Application panel guides.

 
Use the Manifest pane to inspect your web app manifest and trigger Add to Homescreen events.
 
Use the Service Workers pane for a whole range of service-worker-related tasks, like unregistering or updating a service, emulating push events, going offline, or stopping a service worker.
 
View your service worker cache from the Cache Storage pane.
 
Unregister a service worker and clear all storage and caches with a single button click from the Clear storage pane.
 
  
Web app manifest
 
If you want your users to be able to add your app to their mobile homescreens, you need a web app manifest. 
The manifest defines how the app appears on the homescreen, where to direct the user when launching from homescreen, and what the app looks like on launch.

Related Guides:
 
Improve user experiences with a Web App Manifest
 
Using App Install Banners
 
 
Once you've got your manifest set up, you can use the Manifest pane of the Application panel to inspect it.


 
To look at the manifest source, click the link below App Manifest label (https://airhorner.com/manifest.json in the screenshot above).
 
Press the Add to homescreen button to simulate an Add to Homescreen event. 
Check out the next section for more information.
 
The Identity and Presentation sections just display fields from the manifest source in a more user-friendly display.
 
The Icons section displays every icon that you've specified.
 
  
Simulate Add to Homescreen events
 
A web app can only be added to a homescreen when the site is visited at least twice, with at least five minutes between visits. 
While developing or debugging your Add to Homescreen workflow, this criteria can be inconvenient. 
The Add to homescreen button on the App Manifest pane lets you simulate Add to Homescreen events whenever you want.

You can test out this feature with the Google I/O 2016 progressive web app, which has proper support for Add to Homescreen. 
Clicking on Add to Homescreen while the app is open prompts Chrome to display the "add this site to your shelf" banner, which is the desktop equivalent of the "add to homescreen" banner for mobile devices.



Tip: Keep the Console drawer open while simulating Add to Homescreen events. 
The Console tells you if your manifest has any issues and logs other information about the Add to Homescreen lifecycle.

The Add to Homescreen feature cannot yet simulate the workflow for mobile devices. 
Notice how the "add to shelf" prompt was triggered in the screenshot above, even though DevTools is in Device Mode. 
However, if you can successfully add your app to your desktop shelf, then it'll work for mobile, too.

If you want to test out the genuine mobile experience, you can connect a real mobile device to DevTools via [remote debugging]remote debugging, and then click the Add to Homescreen button (on DevTools) to trigger the "add to homescreen" prompt on the connected mobile device.

Service workers
 
Service workers are a fundamental technology in the future web platform. 
They are scripts that the browser runs in the background, separate from a web page. 
These scripts enable you to access features that don't need a web page or user interaction, like push notifications, background sync, and offline experiences.

Related Guides:
 
Intro to Service Workers
 
Push Notifications: Timely, Relevant, and Precise
 
 
The Service Workers pane in the Application panel is the main place in DevTools to inspect and debug service workers.


 
If a service worker is installed to the currently open page, then you'll see it listed on this pane. 
For example, in the screenshot above there's a service worker installed for the scope of https://events.google.com/io2016/.
 
The Offline checkbox puts DevTools into offline mode. 
This is equivalent to the offline mode available from the Network panel, or the Go offline option in the Command Menu.
 
The Update on reload checkbox forces the service worker to update on every page load.
 
The Bypass for network checkbox bypasses the service worker and forces the browser to go to the network for requested resources.
 
The Update button performs a one-time update of the specified service worker.
 
The Push button emulates a push notification without a payload (also known as a tickle).
 
The Sync button emulates a background sync event.
 
The Unregister button unregisters the specified service worker. 
Check out Clear storage for a way to unregister a service worker and wipe storage and caches with a single button click.
 
The Source line tells you when the currently running service worker was installed. 
The link is the name of the service worker's source file. 
Clicking on the link sends you to the service worker's source.
 
The Status line tells you the status of the service worker. 
The number on this line (#1 in the screenshot above) indicates how many times the service worker has been updated. 
If you enable the update on reload checkbox you'll notice that the number increments on every page load. 
Next to the status you'll see a start button (if the service worker is stopped) or a stop button (if the service worker is running). 
Service workers are designed to be stopped and started by the browser at any time. 
Explicitly stopping your service worker using the stop button can simulate that. 
Stopping your service worker is a great way to test how your code behaves when the service worker starts back up again. 
It frequently reveals bugs due to faulty assumptions about persistent global state.
 
The Clients line tells you the origin that the service worker is scoped to. 
The focus button is mostly useful when you've enabled the show all checkbox. 
When that checkbox is enabled, all registered service workers are listed. 
If you click on the focus button next to a service worker that is running in a different tab, Chrome focuses on that tab.
 
 
If the service worker causes any errors, a new label called Errors shows up.



Service worker caches
 
The Cache Storage pane provides a read-only list of resources that have been cached using the (service worker) Cache API.



Note that the first time you open a cache and add a resource to it, DevTools might not detect the change. 
Reload the page and you should see the cache.

If you've got two or more caches open, you'll see them listed below the Cache Storage dropdown.



Quota usage
 
Some responses within the Cache Storage pane may be flagged as being "opaque". 
This refers to a response retrieved from a different origin, like from a CDN or remote API, when CORS is not enabled.

In order to avoid leakage of cross-domain information, there's significant padding added to the size of an opaque response used for calculating storage quota limits (i.e. 
whether a QuotaExceeded exception is thrown) and reported by the navigator.storage API.

The details of this padding vary from browser to browser, but for Google Chrome, this means that the minimum size that any single cached opaque response contributes to the overall storage usage is approximately 7 megabytes. 
You should keep this in mind when determining how many opaque responses you want to cache, since you could easily exceeded storage quota limitations much sooner than you'd otherwise expect based on the actual size of the opaque resources.

Related Guides:
 
Stack Overflow: What limitations apply to opaque responses?
 
Workbox: Understanding Storage Quota
 
  
Clear storage
 
The Clear Storage pane is a very useful feature when developing progressive web apps. 
This pane lets you unregister service workers and clear all caches and storage with a single button click. 
Check out the section below to learn more.

Related Guides:
 
Clear Storage
 
  
Other Application panel guides
 
Check out the guides below for more help on the other panes of the Application panel.

Related Guides:
 
Inspect page resources
 
Inspect and manage local storage and caches
 
 

View Page Resources With Chrome DevTools
This guide teaches you how to use Chrome DevTools to view a web page's resources. 
Resources are the files that a page needs in order to display correctly. 
Examples of resources include CSS, JavaScript, and HTML files, as well as images.
This guide assumes that you're familiar with the basics of web development  and Chrome DevTools.
Open resources
   When you know the name of the resource that you want to inspect, the Command Menu provides a fast way of opening the resource.
 
 Press Control+P or Command+P (Mac). 
The Open File dialog opens.

 
Figure 1. The Open File dialog
 
 Select the file from the dropdown, or start typing the filename and press Enter once the correct file is highlighted in the autocomplete box.

 
Figure 2. Typing a filename in the Open File dialog

 
  
Open resources in the Network panel
   See Inspect a resource's details.


Figure 3. Inspecting a resource in the Network panel
Reveal resources in the Network panel from other panels
   The Browse resources section below shows you how to view resources from various parts of the DevTools UI. 
If you ever want to inspect a resource in the Network panel, right-click the resource and select Reveal in Network panel.


Figure 4. The Reveal in Network panel option
Browse resources
  
Browse resources in the Network panel
   See Log network activity.


Figure 5. Page resources in the Network Log
Browse by directory
   To view a page's resources organized by directory:
 
Click the Sources tab to open the Sources panel.
 
 Click the Page tab to show the page's resources. 
The Page pane opens.

 
Figure 6. The Page pane

Here's a breakdown of the non-obvious items in Figure 6:
 
top is the main document browsing context.
 
airhorner.com represents a domain. 
All resources nested under it come from that domain. 
For example, the full URL of the comlink.global.js file is probably https://airhorner.com/scripts/comlink.global.js.
 
scripts is a directory.
 
(index) is the main HTML document.
 
iu3 is another browsing context. 
This context was probably created by an <iframe> element embedded in the main document HTML.
 
sw.js is a service worker execution context.
 
 
 Click a resource to view it in the Editor.

 
Figure 7. Viewing a file in the Editor

 
  
Browse by filename
   By default the Page pane groups resources by directory. 
To disable this grouping and view each domain's resources as a flat list:
 
Open the Page pane. 
See Browse by directory.
 
 Click More Options  and disable Group By Folder.

 
Figure 8. The Group By Folder option

Resources are organized by file type. 
Within each file type the resources are organized  alphabetically.

 
Figure 9. The Page pane after disabling Group By Folder

 
  
Browse by file type
   To group resources together based on their file type:
 
 Click the Application tab. 
The Application panel opens. 
By default the Manifest pane usually opens first.

 
Figure 10. The Application panel

 
 Scroll down to the Frames pane.

 
Figure 11. The Frames pane

 
 Expand the sections that you're interested in.
 
 Click a resource to view it.

 
Figure 11. Viewing a resource in the Application panel

 
  
Browse files by type in the Network panel
   See Filter by resource type.


Figure 12. Filtering for CSS in the Network Log

快捷键
快捷键比较多，这里挑出几个常用的

全局快捷键
window
Mac

打开 开发者工具
F12、Ctrl+Shift+I
Cmd+Opt+I
打开 开发者工具 并聚焦到控制台
Ctrl+Shift+J
Cmd+Shift+C
刷新页面
F5、Ctrl+R
Cmd+R
刷新忽略缓存内容的页面
Ctrl+F5、Ctrl+Shift+R
Cmd+Shift+R


在Elements 面板中使用的快捷键

Elements 面板
window
Mac

编辑属性
Enter、双击属性
Enter、双击属性
隐藏元素
H
H
切换为以HTML形式编辑

F2


在Styles 边栏中使用的快捷键

Styles 边栏
window
Mac

转到源中属性值声明行
Ctrl+点击属性值
CMd+点击属性值
在颜色定义值之间循环
Shift+点击颜色选取器框
Shift+点击颜色选取器框
编辑下一个/上一个属性
Tab、Tab+Shift
Tab、Tab+Shift


在控制台中使用的快捷键

控制台
window
Mac

聚焦到控制台
Ctrl+

Ctrl+
清除控制台
Ctrl+L
Cmd+K、Opt+L
多行输入
Shift+Enter
Ctrl+Return



区域截屏
选取页面中的一部分，保存为图片
1、打开开发者工具
使用 快捷键 F12 (Windows) 或 Cmd+Opt+I (Mac)

2、选择左上角的元素选择按钮，图标颜色变为蓝色即表示选中了

3、Windows 下按住 Ctrl，Mac 就按住 Command，然后点击鼠标左键在页面选择区域即可，松开鼠标后，截图自动下载。
4、图片自动下载好后，点击图片后面的箭头，可以在文件夹中显示

节点截图
选中页面中某一元素，保存为图片
1、打开开发者工具
使用 快捷键 F12 (Windows) 或 Cmd+Opt+I (Mac)

2、选中任意元素节点

3、打开命令工具
使用快捷键 Ctrl + Shift + p (Windows) 或 Cmd + Shift + p (Mac)

4、点击Capture node screenshot，或者输入这行中任意的关键字，比如输入node，也会出来这个选项，然后点击这个选项，图片会自动下载。

5、图片自动下载好后，点击图片后面的箭头，可以在文件夹中显示

截全屏
保存完整网页为图片
第一种方式
1、打开开发者工具
使用 快捷键 F12 (Windows) 或 Cmd+Opt+I (Mac)

2、打开命令工具
使用快捷键 Ctrl + Shift + p (Windows) 或 Cmd + Shift + p (Mac)

3、点击Capture full size screenshot，或者输入这行中任意的关键字，比如输入full，也会出来这个选项

4、图片自动下载好后，点击图片后面的箭头，可以在文件夹中显示

第二种方式
1、打开开发者工具
使用 快捷键 F12 (Windows) 或 Cmd+Opt+I (Mac)
2、选中 切换开发模式按钮，图标颜色变为蓝色即表示选中了

3、点右上方的三个 小点，点击Capture full size screenshot，图片会自动下载

拾色器
在Styles边栏 点击任意颜色的小色块，就可以弹出颜色选择器


1、颜色选择区域。
2、吸管。
3、复制到剪贴板。将显示值复制到剪贴板。
4、显示值。颜色的RGBA，HSLA或十六进制表示。
5、调色板。单击其中一个方块将颜色更改为该方块。
6、色相。
7、透明度。
8、显示值切换器。在当前颜色的RGBA，HSLA和Hex表示之间切换。
9、调色板切换器。
快速添加样式规则
1、在Styles 边栏，鼠标放在每一小块样式规则上，右下方都会有三个小点

2、鼠标放在这三个小点上，会出现5个小图标，每个小图标都有作用

3、他们从左到右分别代表
添加 text-shadow
添加 box-shadow
添加 color
添加 background-color
插入样式规则

增加移动设备
1、打开开发者工具
使用 快捷键 F12 (Windows) 或 Cmd+Opt+I (Mac)
2、点击右上方的三个小点，然后选择Settings

3、选择Devices，然后在需要添加的设备前面打上勾就可以了


google update location
C:\Program Files (x86)\Google\Update\1.3.35.452


make Google Chrome titlebar height lower
In Windows 10, go to Display Settings from right-clicking on the Desktop, select Home, then Ease of Access
There will be a choice to Make text bigger.  Dragging the slider left or right will make that part of Google Chrome lower or higher. 
Click on Apply to engage the choice.

Google Codelabs
Google Codelabs

Using Cloud Shell


Chrome Auto-Close Download Bar
Ctrl-J Ctrl-W

open url full screen
Chrome by default doesn't allow any type of UI in full screen mode. That is, without the use of an extension. [Reference Link]

However, if you using a keyboard with a Windows Key then you can push [Windows Key] + [R]. This will bring up the run box. Type in the address you want and hit enter. If Google Chrome is your default browser then it will bring up a new web page.

Track HTML, CSS, and JavaScript changes
https://developer.chrome.com/docs/devtools/changes/
https://developer.chrome.com/docs/devtools/developer-resources/

The Changes tab shows changes you made within DevTools.

If you reload either DevTools or your page, the changes disappear.
To make DevTools persist changes across page loads, follow the steps in Local overrides.

To make DevTools write changes to your local sources, follow the steps in Edit and save files with Workspaces.
 Open the Changes tab
To open the Changes tab:
Open DevTools.
Press Control +Shift +P to open the Command Menu.

Start typing changes, select Show Changes, and press Enter .


Alternatively, in the upper right corner, click 
 Customize and control DevTools > More tools > Changes.

By default, DevTools displays the Changes tab at the bottom of your DevTools window, in the Drawer.
 View and understand your changes
To view your changes:
Open DevTools.

Make changes to your sources:
HTML: First, enable Local overrides, then make changes in Sources
CSS in Elements > Styles or Sources
JavaScript in Sources

Open the Changes tab and select a file in the right-hand side of the tab.

Observe a diff output that highlights the following:


The Changes tab pretty-prints the diff output automatically, so you don't have to scroll horizontally to see the changes in a single line.
 Copy CSS changes
If you made changes to CSS in Elements > Styles, you can copy all of them with a single button:
Open the Changes tab and, in the right-hand side of the tab, select the CSS file you made changes to.

Click the 
Copy button at the bottom of the Changes tab.


 Revert all changes made to a file
To revert changes made to a file:
On left-hand side of the Changes tab, select a file with changes to revert.

On the action bar at the bottom, click
 Revert all changes to current file.



Disable Tab Hover Card images In Chrome
Navigate to chrome://flags/
Search for “tab hover”
choose “Disabled.”

Tampermonkey is a popular browser extension that allows users to customize the functionality of websites they visit.
It provides a platform for running userscripts, which are small snippets of code that can modify the behavior of web pages.

Tampermonkey has several potential applications:
Customizing website functionality: With Tampermonkey, users can modify the appearance and behavior of websites to suit their preferences.
This includes changing the layout, adding or removing elements, hiding unwanted content, and enhancing site features.

Automating tasks: Tampermonkey can automate repetitive tasks on websites by creating scripts that interact with web pages.
This can be useful for tasks such as form filling, data extraction, content scraping, and automated interactions with web applications.

Enhancing productivity: By automating tasks and customizing websites, Tampermonkey can improve productivity.
Users can create scripts that streamline their workflows, automate repetitive actions, or add productivity-enhancing features to web applications they commonly use.

Ad-blocking and content filtering: Tampermonkey can be used to create scripts that block or filter unwanted advertisements, banners, or pop-ups on websites.

Users can also customize the appearance of websites to remove distracting elements and focus on the content they need.

Accessibility improvements: Tampermonkey scripts can be created to enhance website accessibility for users with specific needs.
This may include increasing font sizes, improving color contrasts, adding text-to-speech functionality, or modifying site elements for better navigation.

Gaming enhancements: Tampermonkey can be utilized to create scripts that modify or enhance online games.
This includes automating gameplay actions, adding new features or shortcuts, or even creating cheats or hacks (although this is generally discouraged).

Social media customization: Tampermonkey can be used to customize the behavior and appearance of social media platforms.
Users can create scripts to remove certain elements, add features, or modify the user interface to better suit their preferences.

It's important to note that while Tampermonkey provides a powerful tool for customization, it's essential to use it responsibly and respect the terms of service of the websites you visit.

Here are some additional details about Tampermonkey:

Scripting languages: Tampermonkey supports scripting in JavaScript, which is a widely used programming language for web development.
This makes it accessible to developers and users familiar with JavaScript.

User-friendly interface: Tampermonkey provides a user-friendly interface that allows users to easily manage their scripts.
It offers features like script management, editing, enabling/disabling scripts, and script synchronization across multiple devices.

Script repositories: Tampermonkey has its own script repository called "Tampermonkey Dashboard" where users can discover and install scripts created by other users.
These scripts can be reviewed, rated, and categorized, making it easier to find useful scripts.

Script synchronization: Tampermonkey provides the ability to synchronize scripts across multiple devices.
This allows users to have the same scripts and settings available on different browsers or devices, providing a consistent experience.

Security considerations: While Tampermonkey can be a powerful tool, it's important to exercise caution when using scripts from unknown sources.
Malicious scripts can potentially compromise your privacy and security.
It's recommended to only install scripts from trusted sources and review the code before running them.

Compatibility: Tampermonkey is compatible with several popular web browsers, including Google Chrome, Mozilla Firefox, Microsoft Edge, Opera, and Safari.
This cross-browser compatibility ensures that users can enjoy the benefits of Tampermonkey regardless of their preferred browser.

Community support: Tampermonkey has a vibrant and active community of users and developers.
Various forums, discussion boards, and online communities exist where users can seek help, share scripts, and collaborate on projects.
This community support can be valuable when learning and troubleshooting Tampermonkey scripts.

Advanced features: Tampermonkey offers advanced features like user script meta-headers, which allow users to specify metadata about their scripts, such as name, description, version, and dependencies.
It also provides APIs for interacting with web pages, making HTTP requests, storing data, and manipulating site elements.

These features and capabilities make Tampermonkey a versatile tool for customizing and enhancing the web browsing experience.
With the ability to modify websites and automate tasks, users can tailor their online interactions to their specific needs and preferences.

besides Tampermonkey, there are several other browser extensions that offer similar functionality.

Here are a few notable ones:
Greasemonkey: Greasemonkey is a popular userscript manager extension available for Mozilla Firefox.
It allows users to install and run userscripts to customize website functionality and behavior.

Violentmonkey: Violentmonkey is a userscript manager extension available for multiple browsers, including Google Chrome, Mozilla Firefox, Microsoft Edge, and Opera.
It provides a platform for running userscripts and offers features similar to Tampermonkey and Greasemonkey.

AdGuard: AdGuard is primarily known as an ad-blocking extension, but it also offers userscript support.
It allows users to create and run custom userscripts to further enhance their browsing experience beyond ad-blocking.

Scriptish: Scriptish is an extension similar to Greasemonkey, available exclusively for Mozilla Firefox.
It enables users to install and manage userscripts to modify website behavior and add custom features.

NinjaKit: NinjaKit is a userscript manager extension available for Safari browsers.
It allows users to install and run userscripts, providing customization options and additional functionality for web pages.

These extensions share the common goal of allowing users to customize websites and automate tasks through userscripts.

Top 13 Greasemonkey and Tampermonkey User Scripts
Search for Userscripts
searching using a popup dialog

01
Anti-Adblock Killer

What We Like
Fast and light.
No ads.
Easy installation.

What We Don't Like
Buggy for some users.
Can slow the browser.
May block non-ad pop-ups.

Many websites either recommend or force you to disable ad-blocking software such as Adblock Plus. 
This script overrides that restriction in some cases and allows your ad blocker to function as expected. 

It's not perfect, but it's better than nothing.

02
AntiAdware

What We Like

Removes unwanted items.
Works with popular sites.
Responsive upstream.
What We Don't Like

No recent updates.
Sometimes buggy.
Lack of modifications.

Many free downloads are coupled with additional applications, extensions, or settings modifications that you may not want. 

Some downloads include harmless additions such as a branded browser toolbar or a change to your home page. 
However, some free downloads may install adware and other less-than-reputable software. 

This script does a good job of removing these unwanted items on some of the most popular websites.


03
Auto Close YouTube Ads

What We Like

Customizable settings.
Support YouTubers with shorter ads.
Three menu options.

What We Don't Like
Doesn't have auto skip for banner ads.
Some users report bugs.
Only works on YouTube.

This configurable script automatically closes YouTube video ads after a time delay that you choose. 
It also offers an option to mute these advertisements as soon as the ad launches.

04
Direct Links Out

What We Like
Frequent updates.
Works on popular sites.
Supports subdomains.

What We Don't Like
Doesn't work on all sites.
Some buggy subdomains.
No customization options.

Many websites display a warning and require user interaction when you click a link that redirects to another site. 
This script disables that functionality on many popular domains, including Google, YouTube, Facebook, and X (formerly Twitter).

05
Feedly Filtering and Sorting

What We Like

Enhances the Feedly website.
Advanced filtering.
Custom sorting.
What We Don't Like

No recent updates.
Buggy in Firefox.
Can be slow to load.

The Feedly Filtering and Sorting script adds some useful features such as advanced keyword matching, auto-load, filtering, and restricting to the popular news-aggregation site.

06
Google Hit Hider by Domain

What We Like

Supports multiple search engines.
Filters spam.
Blocks offensive content.
What We Don't Like

Not functional with some browsers.
Some results aren't filtered.
Buttons can be buggy.

Block certain websites or entire domains from appearing in search engine results with this script. 

The title is a bit misleading, as it supports Bing, DuckDuckGo, Yahoo, and other search engines in addition to Google.

It works best with Chrome or Firefox.

07
Google Search Extra Buttons

What We Like

Customized search.
Improved search time.
Option to revert to the old theme.
What We Don't Like

Can't change button locations.
Doesn't work with all browsers.
Only works with Google search.

This script adds useful buttons to Google's engine. 

These buttons include tools to search for PDF documents and search for results from user-specified time intervals, including days, weeks, months, years, and hours.

08
Instagram Reloaded

What We Like

View full-size content.
Uses keyboard shortcuts.
Direct image downloads.
What We Don't Like

Some features only work with Chrome.
Videos download without audio.
Can't download Stories.
View and download full-size images and videos from Instagram by pressing a keyboard shortcut with this script.

This script works with all browsers, but the direct-download feature only works with Chrome.

09
Linkify Plus Plus

What We Like

Supports dynamic content.
Custom allowlist and blocklist.
Embeds images.
What We Don't Like

Only works with Chrome or Firefox.
Incompatible with some scripts.
Can be buggy.

This script converts text URLs and IP addresses into links to the respective destinations. 

It makes almost any text link a clickable link.

10
Manga Loader
What We Like

Support for over 70 sites.
Long strip format.
Works on mobile through a bookmarklet.
What We Don't Like

Doesn't work on all sites.
Some images don't load.
Mobile can be buggy.

If you're a fan of the Japanese comic genre, this script displays complete chapters on one page in an easy-to-read long-strip format on many of the web's most popular Manga sites.

11
Pinterest Without Registration

What We Like

Browse Pinterest without a login or registration.
Removes modal pop-ups.
Unlocks scrolling.
What We Don't Like

Login may be required after some scrolling.
Only works in the U.S.
No recent updates.

This script lets you browse image collections on Pinterest without creating an account on the site. 

However, it doesn't work as expected on all pages.

12
Translate.google Tooltip

What We Like

Translates selected text into a tooltip.
Works with Google Translate.
Responds instantly.
What We Don't Like

May not work with Firefox.
Doesn't work on all sites.
No recent updates.
Use this script to translate selected text on a web page to the language of your choice with the Alt key and the cursor.

13
Wide GitHub

What We Like

Read lines of code without scrolling.
See more documentation simultaneously.
Easy to toggle.
What We Don't Like

No GitHub Enterprise support.
Only works with Chrome.
Limited functionality.
Programmers find this script useful. 
It resizes all GitHub repository pages for a better look and feel.

Find More Greasemonkey and Tampermonkey User Scripts

When you're ready to search for scripts, the following sitesare the best starting points.Not every script works across all browsers, so verify the corresponding description and notes before installation.


Greasy Fork: Greasy Fork is a terrific source for user scripts. 
It offers a rapidly growing compendium of over 10,000 scripts, a well-maintained and easy-to-use interface, and an active forum. 
The Greasy Fork Bull**** Filter script makes searching the site effortless. 

It hides scripts for games, social networks, and those with non-English characters in the Greasy Fork description.
OpenUserJS: OpenUserJS offers a wide range of scripts. 
It provides a user-friendly repository with a continually expanding selection.
Userscripts.org (mirror): At one time, Userscripts.org was the only place to find the best scripts. 
It went offline and is now available as a mirrored site on a different domain. 
You'll find thousands of scripts on this mirror site, and many of these are not safe. 

Use discretion when downloading from the Userscripts.org mirror.

Host a website on google drive
Host a website on google drive

play sound file in a webpage background?
^lt;audio controls autoplay loop class="greenbut" id="myaudio">
  ^lt;source src="./mp3/秋戀.mp3" type="audio/mpeg">
^lt;/audio>

let soundID = document.getElementById("myaudio");
soundID.volume = 0.05;

♦Chrome 66禁止声音自动播放之后

Browser Extensions For Web Design & Development
Browser Extensions For Web Design & Development

ColorZilla, WhatFont, Wappalyzer, Web Developer, Dark Reader, JSON Formatter, Session Buddy, Fake Filler, Quick Source Viewer, CSS Viewer, User Agent Switcher, Visbug, Daily.Dev, LT Debug, Check My Links, Web Developer Checklist, Click Up, Checkbot, IE Tab, Lorem Ipsum Generator, Outro

Disable JavaScript in Google Chrome
Go to Menu >Settings >Privacy & security >Site Settings >Content >JavaScript.

Toggle off JavaScript in Chrome.
For specific pages: In Chrome's JavaScript settings, in the Block section, select Add to specify a URL in which to block JavaScript.

In the Allow section, select Add to specify a URL where you want to allow JavaScript.
(Do this when JavaScript is disabled.)

This article explains how to disable JavaScript in the Google Chrome web browser if you want to block ads on the pages you visit, fix technical issues, or if you have security concerns.

Follow these steps to disable JavaScript in the Google Chrome browser:

Open the Chrome browser and select the main menu button, which appears as three vertically-aligned dots located in the upper-right corner of the browser window.
Select Settings.
The Chrome settings display in a new tab or window, depending on your configuration.

Under the Privacy and security section, select Site Settings.
Under Content, select JavaScript.
Turn off the toggle switch disable JavaScript in Chrome.

to Disable JavaScript Only on Specific Pages
Blocking JavaScript can disable functionality on websites, and may make some websites unusable.
Blocking it in Chrome isn't an all-or-nothing setting, though.

You can choose to block specific sites, or, if you block all JavaScript, set exceptions for specific websites you define.
You can find these settings in the JavaScript section of the Chrome settings.
Beneath the switch to disable all JavaScript are two sections, Block and Allow.

In the Block section, select Add to specify the URL for the page or site you want to disable JavaScript.
Use the Block section when the JavaScript switch is set to enabled (see above).
In the Allow section, select Add to specify the URL of a page or site on which you want to allow JavaScript to run.

Use this when the toggle switch is off to disable all JavaScript.

On older versions of Chrome, the JavaScript section has a Manage exceptions button, which allows you to override the radio button settings for specific user-defined domains or individual pages.

Google Chrome: Design Mode = ON
let's you edit inline

F12, dev tools -- then enter this in the console:
document.designMode="on";

Now you can type on any element of the webpage and change what it says.

You can also create a bookmarklet called 'edit' with this as the URL:
javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

and click it at any time to make any page easy to edit.

Use Headless Chrome to Convert Html to Pdf
Simple example
chrome.exe --headless --print-to-pdf-no-header --print-to-pdf="C:\Output\MyPdf.pdf" "file:///C:/temp/MyHtml.html"

Example with more parameters
This example has more (and quite useful) parameters
chrome.exe --headless --disable-gpu --run-all-compositor-stages-before-draw --print-to-pdf-no-header --print-to-pdf="C:\Output\MyPdf.pdf" --no-margins "file:///C:/temp/MyHtml.html"
More realistic (battle tested) example
Here's an actual script I used for converting hundreds of html files into pdf.

$fileNum = 0;
$numFiles = (dir *.html | measure | % Count);
$cromyCromy = "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe";
dir .
*.html | #select -first 100 |
% {
	$fileNum += 1;
	$ff = $_.Name;
	$full_ff = "file:///C:/temp/html_files/" + $ff;
	$pdf_name =        "C:\temp\output\Pdf\$($ff -replace ".html",".pdf")";
	$commandTime = (measure-command {
		$argyArgy = "--headless --disable-gpu --run-all-compositor-stages-before-draw --print-to-pdf-no-header --print-to-pdf=""$pdf_name"" --no-margins ""$full_ff""";
		$x = (Start-Process -FilePath $cromyCromy -ArgumentList $argyArgy -Passthru -wait);
		write-host "$($x.Id)`t`t" -f red -n;
		sleep 1;
	});
	Write-host "$fileNum / $numFiles`t" -f darkgray -n;
	Write-Host "$ff`t" -f white -n;
	Write-Host "`t$($commandTime.TotalMilliseconds)ms";
}
This worked nicely.

Post to google sheets from javascript
<!DOCTYPE html>
<html>
	<head><title>Minimal Signup form</title></head>
	<body>
		<h2>Minimal Signup form</h2>
		<form method="POST" action="https://script.google.com/macros/s/AKfycbxxknLpNqiFLPIJN4uJk9a1olIZVHigYHEn4ifur0_vK6WnB3NW/exec">
<div>name <input name="name" /></div>
<div>email <input name="email" type="email" required /></div>
<button>Sign up!</button>
		</form>
		<script type="text/javascript" src="form-handler.js"></script>
	</body>
</html>

And form-handler.js is:

// Based on https://github.com/dwyl/html-form-send-email-via-google-script-without-server
// get all data in form and return object
function getFormData() {
	var elements = document.getElementById("gform").elements; // all form elements
	var fields = Object.keys(elements).map(function(k) {
		if(elements[k].name !== undefined) {
return elements[k].name;
		// special case for Edge's html collection
		} else if(elements[k].length > 0) {
return elements[k].item(0).name;
		}
	}).filter(function(item, pos, self) {
		return self.indexOf(item) == pos && item;
	});
	var data = {};
	fields.forEach(function(k) {
		data[k] = elements[k].value;
		var str = ""; // declare empty string outside of loop to allow
// it to be appended to for each item in the loop
		if(elements[k].type === "checkbox") { // special case for Edge's html collection
str = str + elements[k].checked + ", "; // take the string and append
// the current checked value to
// the end of it, along with
// a comma and a space
data[k] = str.slice(0, -2); // remove the last comma and space
// from the  string to make the output
// prettier in the spreadsheet
		} else if(elements[k].length) {
for(var i = 0; i < elements[k].length; i++) {
if(elements[k].item(i).checked) {
str = str + elements[k].item(i).value + ", "; // same as above
data[k] = str.slice(0, -2);
}
}
		}
	});
	console.log(data);
	log(data);
	return data;
}
function handleFormSubmit(event) {  // handles form submit withtout any jquery
	event.preventDefault();           // we are submitting via xhr below
	var data = getFormData();         // get the values submitted in the form
	var url = event.target.action;  //
	var xhr = new XMLHttpRequest();
	xhr.open('POST', url);
	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	xhr.onreadystatechange = function() {
		console.log(xhr.status, xhr.statusText);
		log(xhr.status);
		log(xhr.statusText);
		console.log(xhr.responseText);
		log(xhr.responseText);
//document.getElementById('gform').style.display = 'none'; // hide form
//document.getElementById('thankyou_message').style.display = 'block';
return;
	};
	// url encode form data for sending as post data
	var encoded = Object.keys(data).map(function(k) {
		return encodeURIComponent(k) + '=' + encodeURIComponent(data[k])
	}).join('&')
	xhr.send(encoded);
}
function loaded() {
	console.log('contact form submission handler loaded successfully');
	// bind to the submit event of our form
	var form = document.getElementById('gform');
	form.addEventListener("submit", handleFormSubmit, false);
};
document.addEventListener('DOMContentLoaded', loaded, false);
function log(text) {
		//document.getElementById("messages").value += text + "\n";
}

text cursor in chrome that appear everywhere
There's an options called "Navigate pages with a text cursor" in Accessibility settings, you'll need to disable this option.
chrome://settings/accessibility