I have a bundled and minified file and a source map. I added this source map in the chrome dev tools by right clicking in the source and selecting Add Source Map.... That seems to work (although I suspect that something is getting mixed up). The original files now appear in the devtools. But now some of the lines have a gray background (e.g. line 17 in the screenshot below). What does this mean?
The gray background indicates that the source map doesn't include those lines. Sometimes source map generators only supply source mapping for lines that differ or have the potential to differ from the underlying code. In these cases, unmodified lines will have a gray background.
See https://github.com/babel/babel/issues/1318 for an example of this.
Also see What are these grey lines in the Chrome sources panel? for a similar question.
Related
We created a file by making Rotoscope in After effect. Then we auto-trace the Rotoscope made file and exported vector. Then we colored the layers by adding fill. We were planning to use it in our application.
When we tried to save it as a dotLottie file, the exports appeared as white in iOS but they were rendering fine in lottifiles.com. Another layer of white was added on top of fill inside the lottie. We repainted the color of the added white layers with the same color as fill we added, and then exported it as dotLottie.
Here you can see the screenshots:
enter image description here
enter image description here
When we added it to the application, we saw that some layers disappeared while others are rendering OK. There is no set number of layers missing and they all appear to be identical in the way they are created.
Sometimes when I create a new snippet in Chrome devtools its icon has a green dot at the lower right. Sometimes the same thing happens when I edit a snippet. I haven't used snippets in a few months, and I remember there was something I did that made the dot go away, but I can't remember what it was.
What is the significance of the dot? What am I supposed to do when I see one? I looked at lot of web pages describing the use of snippets and even a few videos, and I found no mention of this dot in any of them. Furthermore, the new snippets the videos showed being created did not get a green dot on their icon.
The green dot means that file is linked to the source file within a workspace. It allows you to edit the file in the Dev Tools editor and the source file will be updated with those changes.
Chrome dev tools. Edit and save with Workspaces
I'm a newbie to learning code and I'm currently doing well learning from resources such as treehouse.
However, I would also like to learn from other developers. I have found a few sites that interest me with their build.
I wondering is there any way to view the source code as it was written.
for example when I view the source code by clicking the right mouse button then view source code it appears all on one line squashed together instead of spreading out making the code hard to read.
Here is an example of what I am talking about;
Example of code squashed together
I wondering whether there is an add-on or plugin that will separate out
the code into easily readable chunks so I can learn from it.
You can paste the code to this website http://jsbeautifier.org/ and 'beautify' it. There are also some addons/extentions mentioned for Chrome browser.
In the dev tools window that pops up if you click the Source tab and click a file on the left then click the curly brackets at the bottom of the code window it puts it into a readable format
Right click an element in the page and select "Inspect" to view the DOM as rendered - this isn't the same as the source code, but may be a better indication as (for modern sites) source may be built up by a combination of raw HTML and JS.
When you're viewing JS or CSS look for a {} icon in the bottom left hand corner of the panel - this will pretty print the JS while still letting you step through it.
You can use this with your CSS too:
Go to http://solid.paris/assets/css/styles.min.1490894140.css
Open the Chrome dev tools (CTRL+SHIFT+I)
Click sources at the top of the tools
Select the CSS from the left hand tree view
Click the {} in the bottom left corner
PhpStorm Is there a way to turn "differences only" on on Difference viewer
This view will show a concise view of only the differences.
Something like Beyond Compare has (for example) where only lines with differences are shown?
AFAIK -- no.
But you may use "Collapse unchanged fragments" button on diff viewer toolbar and it will leave 3-4 lines of context around modified lines hiding the rest of the unmodified code. This can be used in both "Side-by-side viewer" mode (2 panels -- right and left) and "Unified viewer" mode (all merged into one view).
For example (PhpStorm 2016.3.2 using "unified viewer" mode):
(the only difference between these 2 files are those few added lines with green background)
I don't have any experience with SVG but I was hoping to use this one in a project I'm working on.
http://openclipart.org/people/aungkarns/sakura1.svg
The problem is that in Google Chrome and Chromium, a thin line is rendered from the top flower, right through the image to down near the stem. In other browsers, in the image viewer in Ubuntu and in Inkscape, this line isn't shown. I don't think it's supposed to be there, so is there anything I can do about it?
The line is the path with id "path2164", (the first path node in Layer 1), if you view the source and remove this element, it will disappear. I don't really know why it doesn't render in other browsers, it may be malformed. At any rate, if you remove it, the image looks normal.