About the development environment
- The interviewer wants to understand the actual work situation of the candidate through the development environment
- The tools of the development environment can reflect the efficiency of the work
- Will be mainly in the form of chat, and will not ask specific questions
Development environment
Git basics
What is version management
Version management is a way to record file changes so that you can check the content of a specific version of the file in the future.
Problems with manual maintenance of document versions
A large number of documents and unclear naming lead to confusion in the document version.
Every time you edit a document, you need to copy it, which is inconvenient. If
multiple people edit the same document at the same time, it is easy to overwrite.
What is Git
Git is a version management control system (abbreviated as VCS). It can save the status of the document as an update record at any point in time, or it can restore the update record at any point in time.
Git installation
Git basic workflow
| git repository | storage cache | Work list |
|---|---|---|
| Used to store submission records | Temporary storage of modified files | Project directory managed by Git |
Git configuration before use
Before using git, you need to tell git who you are, and you need to use it when submitting to the git repository.
1. Configure submitter name: git config --global user.name submitter name
2. Configure submitter name: git config --global user.email submitter mailbox
3. View git configuration information: git config --list (respectively View git config user.name || git config user.email)
note
1. If you want to modify the configuration information, repeat the above command.
2. The configuration only needs to be performed once.
Submission steps
1.git init initialize the git warehouse (Command+Shift+. in mac can display hidden files)
2.git status view file status
3.git add file list tracking file
4.git commit -m submit information to submit code to the warehouse
5.git log View submission record
Revoke
- Overwrite the files in the working directory with the files in the temporary storage area: git checkout file name
- Delete the file from the staging area: git rm --cached file name
- Restore the update record specified in the git warehouse, and overwrite the staging area and working directory: git reset --hard commitID
Branch
For ease of understanding, you can temporarily think of a branch as a copy of the code in the current working directory.
Using branches allows us to separate from the main line of development, so as not to affect the main line of development.
Branch breakdown
1. Master branch (master): A branch that is automatically generated when an update record is submitted to the git repository for the first time.
2. Development branch (develop): As a development branch, it is created based on the master branch.
3. Feature: As a branch for developing specific functions, it is created based on the development branch
Feature Branch -> Development Branch -> Main Branch
Branch command
git branchView branchgit branchBranch name create branchgit checkoutBranch name switch branchgit mergeSource branch merge branch (Note: you must be on the master branch to merge the develop branch)git branch -dBranch name delete branch (delete only after the branch is merged) (-D force deletion)
Save changes temporarily
In git, all changes on the branch can be temporarily extracted and stored, so that developers can get a clean working copy and temporarily shift to other work.
Usage scenario: temporary switching of branches
- Store temporary changes:
git stash - Restore changes:
git stash pop
Debugging tools
Debugging is an essential part of the development process. Debugging tools are those programs that enable us to monitor, control, and correct other programs. They can help us quickly find the cause of the problem and ultimately achieve the goal of improving development efficiency. This article will recommend several more popular program debugging tools for different developers. If you have other better options, please leave a message in the comment area for more developers to learn and discuss.
GDB
官方网站:https://www.oschina.net/p/gdb
GDB (GNU symbolic debugger) is a powerful debugger that can debug multiple languages. One thing to note is that GDB is a debugger, not an integrated environment like VC. You can use some front-end tools such as XXGDB, DDD, etc. They all have a graphical interface, so it is more convenient to use.
Livepool
官方网站:https://www.oschina.net/p/livepool
LivePool is a Web development and debugging tool based on NodeJS and similar to Fiddler that supports packet capture and local replacement. It is a set of convenient WorkFlow and debugging solutions summarized by Tencent AlloyTeam during the development and practice process.
AlloyLever
官方网站:https://www.oschina.net/p/alloylever
AlloyLever is an open source web development and debugging tool by Tencent's AlloyTeam team. Its functions mainly include:
1: Console will output all error messages (script errors and network request errors)
2: Console will output all logs printed by users such as console. [log/error/info/debug/debug]
3: XHR panel will output all (XMLHttpRequest ) AJAX request and the data returned by the server
4: The Resouces panel will output all cookie information and LocalStorage
5: The TimeLime panel will output the time-consuming situation of the time period in the life cycle of the page.
CmBacktrace
官方网站:www.oschina.net/p/cmbacktrace
CmBacktrace (Cortex Microcontroller Backtrace) is an open source library for automatic tracking and locating of error codes of ARM Cortex-M series MCUs, and automatic analysis of error causes.
vConsole
官方网站:https://www.oschina.net/p/vconsole
vConsole is a front-end debugging panel created by the front-end team of the WeChat public platform to solve the problem of log viewing on the mobile phone.
At present, vConsole comes with two panels, the default is the "Log" panel, responsible for displaying the log. Like the Developer Tools on the computer side, developers can call different methods to type different colors to quickly distinguish the log types; the second It is the "System" panel. vConsole will automatically print out some basic information (such as system version) to facilitate developers to locate problems.
Postman
官方网站:https://www.oschina.net/p/postman
Postman is a Chrome extension that provides powerful Web API & HTTP request debugging. It can send any type of HTTP request (GET, HEAD, POST, PUT...) with any number of parameters + headers.
Capture
Wireshark is a very popular network packet analysis software with very powerful functions. Various network packets can be intercepted, and detailed information of the network packets can be displayed. People who use wireshark must understand the network protocol, otherwise they will not understand wireshark.
For security reasons, wireshark can only view packets, but cannot modify the contents of packets or send packets.
Wireshark can obtain HTTP and HTTPS, but cannot decrypt HTTPS, so wireshark cannot understand the content of HTTPS. In summary, if you are dealing with HTTP, HTTPS or use Fiddler, other protocols such as TCP and UDP use wireshark.
wireshark starts to capture packets
Start interface
Wireshark captures the network packets of a certain network card on the machine. When there are multiple network cards on your machine, you need to select a network card.
Click Caputre->Interfaces... The following dialog box appears, select the correct network card. Then click the "Start" button to start capturing packets
Wireshark window introduction
WireShark is mainly divided into these interfaces
- Display Filter (display filter), used to filter
- Packet List Pane (packet list), display the captured packets, source address and destination address, port number. Different colors, representing
- Packet Details Pane, which displays the fields in the packet
- Dissector Pane (hexadecimal data)
- Miscellanous (address bar, miscellaneous)
Page 2 Wireshark display filtering
It is very important to use filtering. When beginners use wireshark, they will get a lot of redundant information, in thousands or even tens of thousands of records, it is difficult to find the part they need. Make it dizzy.
Filters will help us quickly find the information we need in a large amount of data.
There are two kinds of filters,
One is the display filter, which is the one on the main interface, used to find the required record in the captured record
One is the capture filter, which is used to filter the captured packets so as not to capture too many records. Set in Capture -> Capture Filters
Save filter
On the Filter column, after filling in the expression of the Filter, click the Save button and give a name. For example, "Filter 102",
There is an additional "Filter 102" button on the Filter bar.
Rules for filtering expressions
Expression rules
- Protocol filtering
For example, TCP, only TCP protocol is displayed.
- IP filtering
For example, ip.src ==192.168.1.102 shows that the source address is 192.168.1.102,
ip.dst==192.168.1.102, the destination address is 192.168.1.102
tcp.port == 80, the port is 80
tcp.srcport == 80, only displays the TCP protocol's willing port as 80.
- Http mode filtering
http.request.method==“GET”, only displays the HTTP GET method.
- The logical operator is AND/ OR
Commonly used filter expressions
| Filter expression | use |
|---|---|
| http | View only the records of the HTTP protocol |
| ip.src 192.168.1.102 or ip.dst192.168.1.102 | The source or destination address is 192.168.1.102 |
Packet List Pane
The panel of the packet list displays the number, timestamp, source address, destination address, protocol, length, and packet information. You can see that different protocols are displayed in different colors.
You can also modify these display color rules, View ->Coloring Rules.
webpack babel
When we use babel in webpack, we must first install babel-core, which is the core package of the babel compilation library.
If some code needs to call Babel's API for transcoding, the babel-core module must be used.
npm install babel-core --save-dev
After that, for the js file in webpack, we need to compile it, and we need to configure it. In webpack, you need to use babel-loader to help you use babel.
npm install babel-loader --save-dev
So in webpack.config.js, you have to write the following code:
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader'
},
exclude: '/node_modules/'
}
]
Then we have to understand the concept of preset, that is, before Babel is compiled, Babel needs to know your compilation rules and what kind of specifications are used to compile.
For example, if I need to compile according to the es6 standard, then you install a babel-preset-es2015. Similarly, if you want to compile according to es7, then you install babel-preset-es2016:
npm install babel-preset-es2016 --save-dev
Generally speaking, if you want to compile with the latest specifications, just install babel-preset-env directly. It contains babel-preset-es2015, babel-preset-es2016, and babel-preset-es2017, which are equivalent to babel-preset-latest (obsolete), you can compile all the codes in the latest specification:
npm install babel-preset-env --save-dev
With the compilation rules, we continue to configure webpack. In babel-loader, we can add configuration parameters:
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['env'] // 也可以写成presets:['babel-preset-env']
}
},
exclude: '/node_modules/'
}
]
At this point, when packaging, babel will automatically compile our code in accordance with the latest grammar specifications.
So the question is, what do we call our code compilation? If it is a project that only requires compatibility with the chrome browser, chrome supports a lot of es6 syntax very well, so there is no need to do a lot of compilation, the code can run under chrome. If my project is to be compatible with a very low browser version, then the syntax of es6, 7, 8 must be compiled into the syntax of es4 or es5. To what extent is compiled, we can continue to set it through the preset configuration items:
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: [
['babel-preset-env', {
targets: {
browser: ['> 1%']
}
}]
],
}
},
exclude: '/node_modules/'
}
]
In presets, we added a configuration item called browser to babel-preset-env, with a value of >1%, which means that when Babel is used to compile, the compiled grammar supports all those with a market share of more than 1%. Browser. Or you can write it like this:
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: [
['babel-preset-env', {
targets: {
browser: ['chrome']
}
}]
],
}
},
exclude: '/node_modules/'
}
]
Change the parameter to chrome, then the packaged code can only be guaranteed to run normally on chrome. It is hard to say whether other browsers can run, because the degree of packaging you configure is compatible with chrome.
The configuration parameters of this part are very flexible, you can refer to the official document to continue to adjust: Env preset · Babel
So next we continue to talk about what babel-polyfill is. The official website of babel wrote a very clear sentence, babel is only responsible for compiling the grammar. When we write an arrow function, Babel will help you compile it into a normal function. There is no problem. But, for example, if we use promise in our code, the code packaged by Babel is actually a promise. In lower version browsers, promise It is not supported, but babel will not help you handle it, because this is not something you need to do at the syntax compilation level. New APIs that do not convert include global objects such as Iterator, Generator, Set, Maps, Proxy, Reflect, Symbol, and Promise.
Therefore, if we want to make the packaged code compatible with low-version browsers, we must also consider the incompatibility of new syntax low-version browsers such as promise and Set. At this time, babel-polyfill will come out. You only need to install babel-polyfill globally:
npm install --save-dev babel-polyfill
Then use it in the project, your code will not have the compatibility problem just mentioned.
import 'babel-polyfill'
However, there will be some pitfalls when using babel-polyfill directly. The first pit is polluting the global environment. For example, low-version browsers do not have a Set, but babel-polyfill will add a Set to the global variable. Another problem is that it will cause code redundancy. For example, if multiple modules use Promise, each module may independently have a code that is compatible with Promise. Therefore, the use of babel-polyfill can solve the compatibility problem, but it is not the best solution. Therefore, babel-plugin-transform-runtime appears. Using this plug-in, the above problem can be solved.
npm install --save-dev babel-plugin-transform-runtime
npm install --save babel-runtime
Install the plug-in first, and then install babel-runtime, after that, let's change the configuration
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: [
['babel-preset-env', {
targets: {
browser: ['> 1%']
}
}]
],
plugins:['transform-runtime']
}
},
exclude: '/node_modules/'
}
]
Add a plugin configuration, that's it, the entire babel configuration is almost complete. Finally, we can create a .babelrc file in the project directory and put the configuration of babel into it:
{
presets: [['babel-preset-env', {
targets: {
browser: ['> 1%', 'last 2 versions']
}
}]],
plugins:['transform-runtime']
}
Then, webpack.config.js can be reduced to:
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader'
},
exclude: '/node_modules/'
}
]
Add a few points,
Generally speaking, when writing a framework or library by yourself, using babel-plugin-transform-runtime is a good choice, mainly because it does not pollute the environment. And if you write your own project and don't use it, it's easier to use babel-polyfill.
Also, transform-runtime cannot completely replace babel-polyfill. Transform does not support instance methods. For example, the code: [1, 2, 3].includes(3), Array, Object and other "instance" methods of es6, because babel-runtime only supports static methods.
In addition, babel-polyfill and babel-plugin-transform-runtime are independent, there is no dependency between the two, and it is meaningless not to install the two together.
Linux commonly used commands
View hardware information related commands
ifconfig free fdisk ethtool mii-tool dmidecode dmesg lspci
Others (19)
echo printf rpm yum watch alias unalias date clear history eject time nohup nc xargs exec export unset type
System performance monitoring advanced commands (12)
uptime top free vmstat mpstat iostat sar chkconfig
RAM:
top free vmstat mpstat iostat sar
CPU:
top vmstat mpstat iostat sar
I / O:
vmstat mpstat iostat sar
process:
ipcs ipcrm lsof strace lstrace
load:
uptime mount umount df du fsck dd dumpe2fs dump