Dumping and Comparing JavaScript Objects in Chrome Devtools

I’m trying to accomplish what I thought would be a simple thing. I receive two mouse events and I want to dump (deep) each event object to a human readable format so I can compare them (end goal is to see if a user clicked on selected text or not).

I’ve tried every which way with devtools snapshots, copy objects, JSON_* objects, etc. and nothing seems to work. At best, the dump only shows an IsTrusted property. While browsing the objects in devtools itself, the objects are fully expandable, though I can’t find a way to compare two side-by-side so I’m attempting to “export” them for manual comparison.

I understand that these are event objects and lot of their parts aren’t available until called for, but isn’t there a way to “materialize” the object so it can be dumped/etc?

Thank you,

Hans

html – DevTools failed to load SourceMap: Could not load content for http://localhost:3000/javascripts/bootstrap.js.map: HTTP error: status code 404, net:

i get this this error when i try to load a layout page that uses bootstrap 5:
DevTools failed to load SourceMap: Could not load content for http://localhost:3000/javascripts/bootstrap.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

i have included the bootstrap.js file link in my head tags yet i still get this warning. can any one give my a hint on what the problem is .

Notei no chrome devTools que minha aplicação (Angular) está fazendo muitos requests. O que pode estar errado?

//SERVICE
import { Injectable } from ‘@angular/core’;
import { AngularFirestore, AngularFirestoreCollection } from ‘@angular/fire/firestore’;
import { Produto } from ‘../model/produto’;
//import * as rxjs from ‘rxjs’
import { filter, map, reduce, tap, toArray, share,take } from ‘rxjs/operators/’

@Injectable({
providedIn: ‘root’
})
export class ProductService {
productCollection: AngularFirestoreCollection
constructor(private afire: AngularFirestore) {
this.productCollection = this.afire.collection(‘products’);
}

getAllProduct() {
return this.productCollection.snapshotChanges()
.pipe(
map(changes =>
changes.map(a => {
let data = a.payload.doc.data();
let id = a.payload.doc.id
return { id, …data }
})),
take(1),
share()
)
}

getProducts(id) {
return this.afire.doc(‘products/’ + id).valueChanges();
}

addProduct(prod: Produto) {
return this.productCollection.add(prod)
/{
nomeProduto: prod.nomeProduto,
quantidadeEstoque: prod.quantidadeEstoque,
categoria: prod.categoria,
minimoEstoque: prod.minimoEstoque,
tipo: prod.tipo,
descontinuado: prod.descontinuado
}
/

}
getProductByName(name: string) {
// return this.afire.collection(‘products’, ref => ref.where(‘nomeProduto’, ‘==’, name)).valueChanges()
return this.afire.collection(‘products’).valueChanges()
.pipe(
map(prods => {
if (name != "") {
return prods.filter(p => p.nomeProduto.toLowerCase().includes(name.toLowerCase()))
}else{
return null
}
}))

}

update(produto: Produto, key: string) {
this.afire.doc(‘products/’ + key).update(produto)
}
}

//PRODUCT-LIST COMPONENT
import { Component, OnInit, Input } from ‘@angular/core’;
import { Produto } from ‘src/app/model/produto’;
import { ProductService } from ‘src/app/services/product.service’;
import { Observable } from ‘rxjs’;
import { map, debounceTime, distinctUntilChanged, switchMap, take } from ‘rxjs/operators’;
import { FormControl } from ‘@angular/forms’;
import { THIS_EXPR } from ‘@angular/compiler/src/output/output_ast’;

@Component({
selector: ‘app-product-list’,
templateUrl: ‘./product-list.component.html’,
styleUrls: (‘./product-list.component.scss’)
})
export class ProductListComponent implements OnInit {
products: Observable<Produto()>
searchField: FormControl
prod: Observable<Produto()>
constructor(private service: ProductService) {
this.searchField = new FormControl()
this.prod = this.searchField.valueChanges
.pipe(
debounceTime(400),
distinctUntilChanged(),
switchMap(term => this.service.getProductByName(term))
)
}

ngOnInit(): void {

this.products = this.service.getAllProduct()

}

}

Fonts – Chrome flickers while DevTools is open

For some months, I think this is a complete Chrome update (version 76.0.3809.100), which I simply can not customize when I open DevTools. My production sites are flickering. The console seems to be responsible for repeated requests to Google Fonts. I can block the request, but Chrome will not show half of my styles anymore. So I can not develop in Chrome!
Enter image description here

The use of Google Fonts is not really an option. At the moment my answer is to develop only in FF, but then I miss webkit rendering issues until much later in the process (with emulators at this time).

Raleway was used, but I do not think this has anything to do with rendering, as I can always see Raleway when I use it. I tried to disable the cache in DevTools. When I search in stackoverflow almost exclusively the font in question is not displayed / loaded – but my font is displayed as it should.

The flickering of Chrome only stops flickering when I block requests to Google Fonts.

Of course, it is impossible to look only for clues to this problem, as the search terms are simply too broad. Any ideas?
TIA
I would mark "Google Fonts", but I have no reputation to defend. But it should be marked! 🙂

responsive design – Flexbox Flex Shrink does not work in Chrome DevTools device mode when testing the page

While I learn how to use Flexbox and how to work with it Flex-Shrink, I find that it does not work if you use the Chrome devtools toolbar.

Both screenshots have a resolution of 534×821.

Using – Chrome Devtools

flexbox's flex-shrink with chrome devtools

Do not use – Chrome devtools

The flex-shrink of the flexbox is not used with chrome devtools

I mainly use Chrome DevTools to test for changes in my workflow. Does anyone know why that does not work? Is this just a limitation for Chrome, which has not yet been patched?

For the context, I'm using the latest version of Chrome on a 15.4 "MacBook Pro.

Thank you and we look forward to learning how this process works!

google chrome – Added a large folder to the workspace in DevTools, now it crashes

By mistake, I've added a large folder ("Desktop") as part of a workspace in Chrome 74.0.3729.157.

When I open DevTools now, it freezes and it will "Ow snap!" After a while

I've enabled Settings in the Workspace pane, but it's blank. Is it possible that Chrome has added the path to its storage, but it will not show it if it's not being parsed?

r – `devtools :: test ()`, `RNGversion` and` sample` give different results

Below I introduce a problem with the test function of Rstudio. It's a simplified version of what I'm doing in a package. I've certainly done something wrong, but I can not figure out what. I discovered it when I started making changes to a package on CRAN. Suddenly, some tests did not pass Rstudio, but are related to it R CMD test,

Create a new package with Rstudio and call it to fix it usethis :: use_test (), Then edit tests / testthat.R that's the file

Library (test that)
Library()

suppressWarnings (RNGversion ("3.5.0"))

test_check ("")

Next, go to the tests / testthat / test-hello.R and change it

set.seed (1)
norm (1)

test_that ("seed is the same",
expect_known_value (.Random.seed, "the-seed.RDS"))

test_that ("sample is the same",
expect_known_value (sample (100), "sample.RDS")

Build the package and run it devtools :: test () 3 times. The first time, the reference values ​​are created. The second time results

devtools :: test ()
# R loading 
#R testing 
#R ✔ | OK F W S | context
#R ✖ | 1 1 | Hello
#R ──────────────────────────────────────────────────────────────────────────────────────────────────── ──────────────────────
#R ???: Error: sample is the same
#R sample (100) has changed from the one in & # 39; sample.RDS & # 39; recorded known value changed.
#R 100/100 mismatches (average difference: 37.1)
#R [1] 39 - 76 == -37
#R [2]  1 - 39 == -38
#R [3] 34 - 24 == 10
#R [4] 87 - 53 == 34
#R [5] 43 - 92 == -49
#R [6] 14 - 86 == -72
#R [7] 82 - 40 == 42
#R [8] 59 - 83 == -24
#R [9] 51 - 90 == -39
#R ...
#R ──────────────────────────────────────────────────────────────────────────────────────────────────── ──────────────────────
#R
#R ══ Results ═════════════════════════════════════════════ ══════════════
#R OK: 1
#R failed: 1
#R Warnings: 0
#R skipped: 0

and overrides the test results. Everything passes for the third time. Run tests on Rstudio with To build > More > test package does not give any failures. Next, go to the console and then to the parent directory and do the following:

Build R CMD 
R CMD test _0.1.0.tar.gz

The latter gives the following testthat.Rout.fail

# R R version 3.6.0 (2019-04-26) - "Planting a Tree"
#R Copyright (C) 2019 The R Foundation for Statistical Computing
#R platform: x86_64-pc-linux-gnu (64-bit)
#R
# R R is free software and comes with ABSOLUTELY NO WARRANTY.
#R You can pass it on under certain conditions.
#R Enter 'license () & # 39; or & # 39; license () & # 39; to get details about the distribution.
#R
#R R is a collaborative project with many contributors.
#R Enter & quot; contributors () & # 39; to get more information and
#R & quot; citation () & # 39; for quoting R or R packets in publications.
#R
#R For some demos, # demo () & # 39 ;, for online help, type & # 39; help () & # 39; or a
#R # help.start () & # 39; for a helpful HTML browser interface.
#R Enter "q ()" to exit R.
#R
Library (test that)
Library()

suppressWarnings (RNGversion ("3.5.0"))

test_check ("")
#R ── 1. Failure: sowing is the same
#R `.Random.seed` has changed from the known value in & # 39; the-seed.RDS & # 39; changed.
# R 1/626 mismatches
#R [1] 403 - 10403 == -10000
#R
# R ── 2. Error: Probe is the same ───────────────────────────────────────────────────────────────────────────────────────
#R sample (100) has changed from the one in & # 39; sample.RDS & # 39; recorded known value changed.
#R 99/100 mismatches (average difference: 36.6)
#R [1] 58 - 39 == 19
#R [2] 90-1 == 89
#R [3] 20 - 34 == -14
#R [4] 88 - 87 == 1
#R [5] 91 - 43 == 48
#R [6] 63 - 14 == 49
#R [7] 60 - 82 == -22
#R [8]  6 - 59 == -53
#R [9] 19 - 51 == -32
#R ...
#R
#R ══ tests the result ═══════════════════════════════════════════ ═ ═════
#R OK: 0 SKIPPED: 0 WARNINGS: 0 FAILED: 2
# 1 1st failure: sowing is the same
# R 2nd mistake: sample is the same
#R
#R error: Test that unit tests failed
# R execution stopped

Restart and run Rstudio

setwd ("tests")
source (& # 39; path / to / package // tests / testthat.R & # 39;

Makes the same as R CMD test, Here is my sessionInfo ()

R Version 3.6.0 (26.04.2019)
Platform: x86_64-pc-linux-gnu (64-bit)
Runs under: Ubuntu 18.04.2 LTS

Matrix products: standard
BLAS: /usr/lib/x86_64-linux-gnu/blas/libblas.so.3.7.1
LAPACK: /usr/lib/x86_64-linux-gnu/lapack/liblapack.so.3.7.1

Random number generation:
RNG: Mersenne twister
Normal: inversion
Example: rounding

Locale:
 [1] LC_CTYPE = en_DE.UTF-8 LC_NUMERIC = C              
 [3] LC_TIME = en_DE.UTF-8 LC_COLLATE = en_DE.UTF-8    
 [5] LC_MONETARY = en_DE.UTF-8 LC_MESSAGES = en_DE.UTF-8   
 [7] LC_PAPER = en_DE.UTF-8 LC_NAME = C                 
 [9] LC_ADDRESS = C LC_TELEPHONE = C            
[11] LC_MEASUREMENT = en_DE.UTF-8 LC_IDENTIFICATION = C

attached basic packages:
[1] stats graphics grDevices utils datasets methods  
[7] base

other attached packages:
[1] _0.1.0 testthat_2.1.1

loaded over a namespace (and not appended):
 [1] compiler_3.6.0 claims that_0.2.1 magrittr_1.5    
 [4] R6_2.4.0 cli_1.1.0 tools_3.6.0     
 [7] withr_2.1.2 rstudioapi_0.10 yaml_2.2.0      
[10] crayon_1.3.4 rlang_0.3.4